Glittering's blog
mamingjuan
2015-12-25
目录

CSS3之animation动画

# CSS3之animation动画

CSS3 animation 动画 是前端开发中比 transition 更强大的动画机制。 如果说 transition 是“从A到B的简单过渡”，那么 animation 就是“可以控制整个过程的多阶段动画”。

我们来系统讲清楚 👇

# 🎬 一、animation 是什么？

CSS3 animation 允许通过关键帧（@keyframes） 定义一系列样式变化， 浏览器会在这些关键帧之间自动计算中间帧，从而实现平滑动画。

✅ 简单理解： transition 只能从 状态 A → 状态 B， 而 animation 可以定义 A → B → C → D … 多阶段动画。

# 🧩 二、基本语法

# 1️⃣ 定义动画（@keyframes）

@keyframes 动画名称 {
  0%   { /* 起始状态 */ }
  50%  { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}
1
2
3
4
5

# 2️⃣ 使用动画（animation 属性）

selector {
  animation: 动画名称 持续时间 速度曲线 延迟 次数 方向 填充模式 播放状态;
}
1
2
3

# 🧱 三、基础示例

<div class="box"></div>
1
.box {
  width: 100px;
  height: 100px;
  background: #42b983;
  animation: move 2s ease-in-out infinite alternate;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}
1
2
3
4
5
6
7
8
9
10
11

✅ 效果： 盒子左右来回移动，永远循环。

# 🧠 四、animation 的八个属性

属性 作用 示例
animation-name 动画名称（与 @keyframes 对应） move
animation-duration 持续时间 2s、500ms
animation-timing-function 速度曲线 ease、linear、ease-in-out
animation-delay 延迟时间 1s
animation-iteration-count 播放次数 infinite / 1 / 3
animation-direction 播放方向 normal / reverse / alternate / alternate-reverse
animation-fill-mode 动画结束后的状态 none / forwards / backwards / both
animation-play-state 控制播放或暂停 running / paused

# 🔹 示例：完整写法

.box {
  animation: move 3s linear 1s 2 alternate forwards;
}
1
2
3

等价于 👇

.box {
  animation-name: move;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}
1
2
3
4
5
6
7
8
9

# 🌀 五、关键帧定义方式

# ✅ 百分比写法（推荐）

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(150px); background: orange; }
  100% { transform: translateX(300px); background: red; }
}
1
2
3
4
5

# ✅ from / to 简写

@keyframes move {
  from { opacity: 0; }
  to { opacity: 1; }
}
1
2
3
4

# ⚙️ 六、动画方向详解（animation-direction）

值 说明 举例
normal 正向播放（默认） 0% → 100%
reverse 反向播放 100% → 0%
alternate 正向 → 反向交替 来回运动
alternate-reverse 反向 → 正向交替 来回运动（从终点开始）

# 🧭 七、动画结束状态（animation-fill-mode）

值 说明 效果
none 动画结束后回到初始状态 默认
forwards 停留在结束帧状态 常用于加载完成后保持最终样式
backwards 动画开始前应用初始帧 结合 delay 使用
both 同时应用 forwards + backwards 进入和退出都生效

# 💡 八、动画控制（animation-play-state）

.box:hover {
  animation-play-state: paused; /* 鼠标悬停暂停 */
}
1
2
3

# 🎨 九、多个动画同时执行

animation:
  move 2s linear infinite,
  fade 3s ease-in-out 1s infinite alternate;
1
2
3

📌 多个动画之间用逗号分隔。

# 🧰 十、常见动画案例

# ✅ 1. 淡入淡出（fade in/out）

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fade 1s ease-in forwards;
}
1
2
3
4
5
6
7

# ✅ 2. 弹跳动画（bounce）

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}
.ball {
  animation: bounce 0.6s ease infinite;
}
1
2
3
4
5
6
7

# ✅ 3. 旋转动画（rotate）

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spin {
  animation: rotate 1.5s linear infinite;
}
1
2
3
4
5
6
7

# ⚡ 十一、性能优化建议

建议 原因
✅ 使用 transform 和 opacity 动画 不会触发布局回流（高性能）
❌ 避免动画 width / top / left 会触发布局（慢）
✅ 使用 will-change 提前优化 通知浏览器提前准备动画层
✅ 控制动画次数 避免长时间占用 GPU

示例：

.element {
  will-change: transform, opacity;
}
1
2
3

# ⚖️ 十二、与 transition 对比总结

对比项 transition animation
触发方式 状态变化（如 hover） 可自动播放
可控性 只能定义开始和结束 可定义多个关键帧
重复播放 不支持 支持循环播放
延迟与暂停 可延迟但不能暂停 可延迟、暂停、控制播放
应用场景 简单过渡 复杂连续动画

# 🧭 十三、结构化总结（思维导图版）

CSS3 Animation（动画）
 ├── 定义：基于关键帧的多阶段动画
 ├── 语法
 │   ├── @keyframes 动画名 { 0%~100% 样式 }
 │   └── animation: name duration timing delay count direction fill state;
 ├── 八大属性
 │   ├── animation-name
 │   ├── animation-duration
 │   ├── animation-timing-function
 │   ├── animation-delay
 │   ├── animation-iteration-count
 │   ├── animation-direction
 │   ├── animation-fill-mode
 │   └── animation-play-state
 ├── 关键帧写法
 │   ├── 百分比写法
 │   └── from/to 简写
 ├── 常见方向
 │   ├── normal / reverse / alternate / alternate-reverse
 ├── 应用场景
 │   ├── 淡入淡出
 │   ├── 弹跳
 │   ├── 旋转
 │   └── 进场/出场动效
 ├── 优化建议
 │   ├── transform / opacity 优先
 │   ├── will-change 提前优化
 │   └── 避免 layout 属性动画
 └── 与 transition 对比
     ├── transition：简单状态过渡
     └── animation：复杂可控动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。

# 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等 X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。 如：直线linear，即cubic-bezier(0,0,1,1)

贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67 (opens new window)

参考：https://www.w3school.com.cn/css3/index.asp (opens new window)

上次更新: 2025/11/25, 03:24:47
CSS3之transition过渡
css动画性能优化

← css动画性能优化→

Copyright © 2015-2025 Glitz Ma