CSS动画系统性知识体系：transition、animation、transform与CSS3新特性

一、CSS动画基础体系

1.1 核心概念与分类

CSS动画是通过CSS属性随时间的变化实现的视觉动效，无需JavaScript即可实现流畅的交互动画。主要分为三大类：

• 过渡动画（transition）：属性值从初始状态到目标状态的平滑过渡
• 关键帧动画（animation）：通过多关键帧定义复杂的时间序列动画
• 变形动画（transform）：对元素进行几何变换，常配合前两者使用

1.2 浏览器渲染与动画原理

浏览器渲染流水线：构建DOM → 构建CSSOM → 生成Render Tree → 布局(Layout) → 绘制(Paint) → 合成(Composite)

动画性能层级（从优到劣）：

1. 合成层属性：transform、opacity（GPU加速，性能最优）
2. 绘制属性：color、background、box-shadow（触发重绘）
3. 布局属性：width、height、margin、top（触发重排，性能最差）

二、transform 变形系统

2.1 2D 变换

transform 是 CSS 变形的核心属性，可同时应用多个变换函数，执行顺序从右到左。

注意：百分比位移是相对于自身宽高计算，常用于水平垂直居中。

2.2 3D 变换

开启3D空间需要父元素设置 perspective（透视距离）。

2.3 配套属性

• transform-origin：变换原点，默认 center center，支持关键词、长度、百分比
• transform-style：子元素是否保留3D空间，flat(默认) / preserve-3d
• perspective：透视距离，值越小透视效果越强，应用在父容器
• perspective-origin：透视视点位置
• backface-visibility：背面是否可见，visible / hidden

三、transition 过渡动画

3.1 核心属性体系

transition 是简写属性，定义属性变化时的平滑过渡效果。

transition: [property] [duration] [timing-function] [delay];

3.2 缓动函数（Timing Function）

控制动画过程中的速度变化曲线。

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 个子属性的简写。

4.3 核心特性详解

animation-fill-mode 填充模式

• none：默认，动画前后不保留样式
• forwards：动画结束后停留在最后一帧
• backwards：动画延迟期间应用第一帧样式
• both：同时应用 forwards 和 backwards

animation-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、luminosity

5.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-timeline

CSS 原生滚动驱动动画，无需 JS 监听滚动事件。

@keyframes scrollAnim {
   
  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-change
• filter

GPU 加速的代价：

• 占用额外显存，移动端过多使用会导致卡顿
• 字体模糊问题（图层提升导致）
• 闪烁问题可通过 backface-visibility: hidden 缓解

6.2 避坑指南

1. 避免动画属性触发重排：不要用 width/height/top/left 做动画，改用 transform
2. 避免同时动画大量元素：控制同时动画的元素数量
3. 合理使用 will-change：不要全局滥用，只给即将动画的元素
4. 移动端优化：减少复杂阴影、渐变的动画，优先使用 transform 和 opacity
5. 降级方案：对低端设备使用 prefers-reduced-motion 关闭动画

6.3 无障碍适配

/* 尊重用户"减少动态效果"的系统设置 */
@media (prefers-reduced-motion: reduce) {
   
  *, *::before, *::after {
   
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

七、三大动画方案对比与选型

选型原则

• 简单状态切换（按钮悬停、菜单展开）→ transition
• 复杂循环动画（加载动画、背景动效）→ animation + @keyframes
• 位缩放移旋转 → 优先用 transform 实现，配合 transition/animation
• 交互动效 → transition + transform 组合（性能最佳）
• 滚动视差 → 优先考虑 scroll-timeline 或 IntersectionObserver

八、常用经典动画模式

1. 淡入淡出：opacity 过渡
2. 滑入滑出：translate + opacity
3. 缩放弹动：scale + cubic-bezier 弹性曲线
4. 旋转加载：rotate + infinite 循环
5. 脉冲呼吸：scale/opacity + alternate 往返
6. 翻转卡片：rotateY + preserve-3d + backface-visibility
7. 手风琴菜单：max-height 过渡（height 0→auto 无法过渡的替代方案）
8. 条纹进度：background-position 位移动画