【CSS】CSS 动画：transition、animation、transform、CSS3 新特性（附《思维导图》）

文章目录

CSS动画系统性知识体系：transition、animation、transform与CSS3新特性
- 一、CSS动画基础体系
- - [1.1 核心概念与分类](#1.1 核心概念与分类)
  - [1.2 浏览器渲染与动画原理](#1.2 浏览器渲染与动画原理)
- [二、transform 变形系统](#二、transform 变形系统)
- - [2.1 2D 变换](#2.1 2D 变换)
  - [2.2 3D 变换](#2.2 3D 变换)
  - [2.3 配套属性](#2.3 配套属性)
- [三、transition 过渡动画](#三、transition 过渡动画)
- - [3.1 核心属性体系](#3.1 核心属性体系)
  - [3.2 缓动函数（Timing Function）](#3.2 缓动函数（Timing Function）)
  - [3.3 过渡触发条件](#3.3 过渡触发条件)
  - [3.4 局限性](#3.4 局限性)
- [四、animation 关键帧动画](#四、animation 关键帧动画)
- - [4.1 @keyframes 规则](#4.1 @keyframes 规则)
  - [4.2 动画属性体系](#4.2 动画属性体系)
  - [4.3 核心特性详解](#4.3 核心特性详解)
  - [4.4 多动画与控制](#4.4 多动画与控制)
- [五、CSS3 动画相关新特性](#五、CSS3 动画相关新特性)
- - [5.1 will-change 性能优化](#5.1 will-change 性能优化)
  - [5.2 滤镜动画 filter](#5.2 滤镜动画 filter)
  - [5.3 混合模式 mix-blend-mode](#5.3 混合模式 mix-blend-mode)
  - [5.4 CSS 变量驱动动画](#5.4 CSS 变量驱动动画)
  - [5.5 滚动驱动动画 @scroll-timeline](#5.5 滚动驱动动画 @scroll-timeline)
  - [5.6 视图过渡 API View Transitions](#5.6 视图过渡 API View Transitions)
- 六、性能优化与最佳实践
- - [6.1 硬件加速原理](#6.1 硬件加速原理)
  - [6.2 避坑指南](#6.2 避坑指南)
  - [6.3 无障碍适配](#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、opacity（GPU加速，性能最优）
绘制属性：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-3d
perspective：透视距离，值越小透视效果越强，应用在父容器
perspective-origin：透视视点位置
backface-visibility ：背面是否可见，visible / hidden

三、transition 过渡动画

3.1 核心属性体系

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

css 复制代码

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

属性	说明	取值
`transition-property`	参与过渡的属性	`all` / 具体属性名 / none
`transition-duration`	过渡持续时间	单位 s 或 ms，默认 0
`transition-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 的灵魂。

css 复制代码

@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 / ms
`animation-timing-function`	缓动函数	同 transition
`animation-delay`	开始前延迟	s / ms，负值表示从中间开始
`animation-iteration-count`	播放次数	数字 / `infinite` 无限循环
`animation-direction`	播放方向	`normal` / `reverse` / `alternate` / `alternate-reverse`
`animation-fill-mode`	填充模式	`none` / `forwards` / `backwards` / `both`
`animation-play-state`	播放状态	`running` / `paused`

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 性能优化

提前告知浏览器元素即将发生的变化，浏览器预先分配资源。

css 复制代码

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 自定义属性（变量）实现更灵活的动画控制。

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 监听滚动事件。

css 复制代码

@keyframes scrollAnim {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: scrollAnim linear;
  animation-timeline: scroll();
}

5.6 视图过渡 API View Transitions

页面切换/路由切换时的原生过渡效果，主要配合 SPA 使用。

css 复制代码

::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 避坑指南

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

6.3 无障碍适配

css 复制代码

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

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

维度	transition	animation	transform
状态数	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 位移动画