文章目录CSS动画系统性知识体系transition、animation、transform与CSS3新特性一、CSS动画基础体系1.1 核心概念与分类1.2 浏览器渲染与动画原理二、transform 变形系统2.1 2D 变换2.2 3D 变换2.3 配套属性三、transition 过渡动画3.1 核心属性体系3.2 缓动函数Timing Function3.3 过渡触发条件3.4 局限性四、animation 关键帧动画4.1 keyframes 规则4.2 动画属性体系4.3 核心特性详解4.4 多动画与控制五、CSS3 动画相关新特性5.1 will-change 性能优化5.2 滤镜动画 filter5.3 混合模式 mix-blend-mode5.4 CSS 变量驱动动画5.5 滚动驱动动画 scroll-timeline5.6 视图过渡 API View Transitions六、性能优化与最佳实践6.1 硬件加速原理6.2 避坑指南6.3 无障碍适配七、三大动画方案对比与选型选型原则八、常用经典动画模式CSS动画系统性知识体系transition、animation、transform与CSS3新特性一、CSS动画基础体系1.1 核心概念与分类CSS动画是通过CSS属性随时间的变化实现的视觉动效无需JavaScript即可实现流畅的交互动画。主要分为三大类过渡动画transition属性值从初始状态到目标状态的平滑过渡关键帧动画animation通过多关键帧定义复杂的时间序列动画变形动画transform对元素进行几何变换常配合前两者使用1.2 浏览器渲染与动画原理浏览器渲染流水线构建DOM → 构建CSSOM → 生成Render Tree → 布局(Layout) → 绘制(Paint) → 合成(Composite)动画性能层级从优到劣合成层属性transform、opacityGPU加速性能最优绘制属性color、background、box-shadow触发重绘布局属性width、height、margin、top触发重排性能最差二、transform 变形系统2.1 2D 变换transform 是 CSS 变形的核心属性可同时应用多个变换函数执行顺序从右到左。变换函数作用取值示例translate(x, y)位移translate(100px, 50px)translateX(n)/translateY(n)单轴位移translateX(50%)scale(x, y)缩放scale(1.5, 0.8)scaleX(n)/scaleY(n)单轴缩放scaleX(2)rotate(deg)旋转rotate(45deg)skew(x-deg, y-deg)倾斜skew(10deg, 5deg)matrix(a,b,c,d,e,f)矩阵变换6参数2D矩阵注意百分比位移是相对于自身宽高计算常用于水平垂直居中。2.2 3D 变换开启3D空间需要父元素设置perspective透视距离。变换函数作用translateZ(z)Z轴位移近大远小translate3d(x, y, z)3D位移rotateX(deg)/rotateY(deg)绕X/Y轴旋转rotate3d(x, y, z, deg)绕自定义轴旋转scaleZ(z)/scale3d(x, y, z)3D缩放matrix3d()4×4 3D矩阵2.3 配套属性transform-origin变换原点默认center center支持关键词、长度、百分比transform-style子元素是否保留3D空间flat(默认) /preserve-3dperspective透视距离值越小透视效果越强应用在父容器perspective-origin透视视点位置backface-visibility背面是否可见visible/hidden三、transition 过渡动画3.1 核心属性体系transition 是简写属性定义属性变化时的平滑过渡效果。transition:[property] [duration] [timing-function] [delay];属性说明取值transition-property参与过渡的属性all/ 具体属性名 / nonetransition-duration过渡持续时间单位 s 或 ms默认 0transition-timing-function缓动函数见下方缓动表transition-delay延迟执行时间单位 s 或 ms允许负值3.2 缓动函数Timing Function控制动画过程中的速度变化曲线。类型关键字曲线特征基础linear匀速基础ease慢-快-慢默认基础ease-in慢入快出基础ease-out快入慢出基础ease-in-out慢入慢出贝塞尔cubic-bezier(n,n,n,n)自定义三次贝塞尔曲线阶梯steps(n, start/end)分步跳变动画steps 函数第一个参数为步数start表示第一步立即执行end表示第一步延迟执行。3.3 过渡触发条件transition 本身不会自动播放必须通过状态变化触发伪类触发:hover、:active、:focus、:checked类名切换JS 添加/移除 class属性变化JS 直接修改 CSS 属性值媒体查询视口尺寸变化触发3.4 局限性只能定义起始和结束两个状态无法中途暂停、反向或循环没有进度回调无法精确控制动画过程延迟只能在开始前不能分段延迟四、animation 关键帧动画4.1 keyframes 规则定义动画的关键帧序列是 animation 的灵魂。keyframes动画名{0%{/* 起始样式 */}50%{/* 中间样式 */}100%{/* 结束样式 */}}/* 等价关键字 *//* from 0%to 100% */关键帧特性百分比顺序任意浏览器自动按时间排序可合并相同样式的关键帧0%, 100% { opacity: 0 }缺省 0% 或 100% 时使用元素当前样式补全关键帧中!important无效4.2 动画属性体系animation 是 8 个子属性的简写。属性说明常用值animation-name引用的关键帧名称keyframes 定义的名字animation-duration单次动画时长s / msanimation-timing-function缓动函数同 transitionanimation-delay开始前延迟s / ms负值表示从中间开始animation-iteration-count播放次数数字 /infinite无限循环animation-direction播放方向normal/reverse/alternate/alternate-reverseanimation-fill-mode填充模式none/forwards/backwards/bothanimation-play-state播放状态running/paused4.3 核心特性详解animation-fill-mode 填充模式none默认动画前后不保留样式forwards动画结束后停留在最后一帧backwards动画延迟期间应用第一帧样式both同时应用 forwards 和 backwardsanimation-direction 播放方向normal正向播放0% → 100%reverse反向播放100% → 0%alternate奇数次正向偶数次反向alternate-reverse奇数次反向偶数次正向4.4 多动画与控制多动画叠加逗号分隔多个动画animation: a 2s, b 3s暂停控制通过animation-play-state: paused实现悬停暂停动态结束JS 监听animationend事件做收尾处理事件体系animationstart、animationend、animationiteration五、CSS3 动画相关新特性5.1 will-change 性能优化提前告知浏览器元素即将发生的变化浏览器预先分配资源。will-change:transform,opacity;只能作为最后手段使用不可滥用用完及时移除否则持续占用GPU内存建议通过 JS 动态添加动画结束后移除5.2 滤镜动画 filter对元素应用图形特效支持过渡和动画。常用滤镜函数blur(px)高斯模糊brightness(%)亮度contrast(%)对比度saturate(%)饱和度hue-rotate(deg)色相旋转invert(%)反色opacity(%)透明度grayscale(%)灰度sepia(%)褐色drop-shadow()投影优势filter 动画在合成层执行性能远高于 box-shadow 等属性。5.3 混合模式 mix-blend-mode定义元素与背景的混合方式共 16 种模式基础normal、multiply、screen、overlay变暗darken、color-burn、hard-light变亮lighten、color-dodge、soft-light其他difference、exclusion、hue、saturation、color、luminosity5.4 CSS 变量驱动动画通过 CSS 自定义属性变量实现更灵活的动画控制。:root{--move-distance:100px;}.box{transform:translateX(var(--move-distance));transition:transform 0.3s;}/* JS 动态修改变量驱动动画 *//* element.style.setProperty(--move-distance, 200px) */5.5 滚动驱动动画 scroll-timelineCSS 原生滚动驱动动画无需 JS 监听滚动事件。keyframesscrollAnim{from{opacity:0;}to{opacity:1;}}.element{animation:scrollAnim linear;animation-timeline:scroll();}5.6 视图过渡 API View Transitions页面切换/路由切换时的原生过渡效果主要配合 SPA 使用。::view-transition-old(root){animation:fade-out 0.3s;}::view-transition-new(root){animation:fade-in 0.3s;}六、性能优化与最佳实践6.1 硬件加速原理触发 GPU 合成层的属性transform: translate3d()/translateZ(0)opacity配合 transform 时will-changefilterGPU 加速的代价占用额外显存移动端过多使用会导致卡顿字体模糊问题图层提升导致闪烁问题可通过backface-visibility: hidden缓解6.2 避坑指南避免动画属性触发重排不要用 width/height/top/left 做动画改用 transform避免同时动画大量元素控制同时动画的元素数量合理使用 will-change不要全局滥用只给即将动画的元素移动端优化减少复杂阴影、渐变的动画优先使用 transform 和 opacity降级方案对低端设备使用prefers-reduced-motion关闭动画6.3 无障碍适配/* 尊重用户减少动态效果的系统设置 */media(prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}}七、三大动画方案对比与选型维度transitionanimationtransform状态数2个起止多个关键帧无状态静态变形触发方式状态变化触发自动/触发均可配合其他动画使用循环能力不支持支持无限循环无中途控制弱强暂停、方向等无复杂度简单过渡复杂序列动画几何变换性能取决于属性取决于属性最优合成层选型原则简单状态切换按钮悬停、菜单展开→ transition复杂循环动画加载动画、背景动效→ animation keyframes位缩放移旋转→ 优先用 transform 实现配合 transition/animation交互动效→ transition transform 组合性能最佳滚动视差→ 优先考虑 scroll-timeline 或 IntersectionObserver八、常用经典动画模式淡入淡出opacity 过渡滑入滑出translate opacity缩放弹动scale cubic-bezier 弹性曲线旋转加载rotate infinite 循环脉冲呼吸scale/opacity alternate 往返翻转卡片rotateY preserve-3d backface-visibility手风琴菜单max-height 过渡height 0→auto 无法过渡的替代方案条纹进度background-position 位移动画