CSS 动画完全指南
CSS动画是现代Web开发中创建动态交互效果的重要技术。它允许开发者在不使用JavaScript的情况下，实现从一个CSS样式到另一个样式的平滑过渡。
核心概念
CSS动画由两个主要部分组成：
- @keyframes 规则 — 定义动画序列中的关键帧样式
- animation 属性 — 控制动画的执行方式
@keyframes 规则
@keyframes 是CSS动画的基础，用于定义动画序列中各个时间点的样式状态。
基本语法
使用百分比定义多个关键帧
💡
关键点：关键帧选择器可以使用
from（等于0%）、to（等于100%）或任意百分比值来指定动画进度。animation 属性详解
animation 是一个简写属性，包含以下子属性：
| 属性 | 说明 | 默认值 |
animation-name | 指定 @keyframes 动画名称 | none |
animation-duration | 动画持续时间 | 0s |
animation-timing-function | 速度曲线 | ease |
animation-delay | 延迟开始时间 | 0s |
animation-iteration-count | 播放次数 | 1 |
animation-direction | 播放方向 | normal |
animation-fill-mode | 动画外状态 | none |
animation-play-state | 播放/暂停状态 | running |
简写语法
animation-timing-function 详解
控制动画的速度曲线，常用值包括：
- ease — 慢速开始，然后加快，最后慢速结束（默认）
- linear — 匀速
- ease-in — 慢速开始
- ease-out — 慢速结束
- ease-in-out — 慢速开始和结束
- cubic-bezier(n,n,n,n) — 自定义贝塞尔曲线
- steps(n, start|end) — 分步动画
animation-fill-mode 详解
定义动画在执行前后如何应用样式：
- none — 不应用任何样式（默认）
- forwards — 保持最后一帧的样式
- backwards — 在延迟期间应用第一帧样式
- both — 同时应用 forwards 和 backwards
CSS Transition vs Animation
CSS中有两种实现动画效果的方式，它们各有特点：
| 特性 | Transition | Animation |
| 触发方式 | 需要触发器（如 :hover） | 可自动播放，无需触发 |
| 状态数量 | 仅两个状态（起始和结束） | 可定义多个关键帧状态 |
| 循环播放 | 不支持 | 支持（infinite） |
| 控制粒度 | 较粗 | 精细控制每个阶段 |
| 使用场景 | 简单的状态变化 | 复杂的动画序列 |
何时使用 Transition
何时使用 Animation
动画事件监听
JavaScript可以监听CSS动画的生命周期事件：
性能优化最佳实践
⚡
性能提示：并非所有CSS属性的动画性能都相同。优先使用
transform 和 opacity，它们可以被GPU加速。推荐做法
- 使用 transform 代替位置属性
- 使用 will-change 提示浏览器
.animated-element {
will-change: transform, opacity;
}- 避免动画触发重排的属性
触发重排（Layout）的属性：width、height、margin、padding、top、left 等
仅触发重绘（Paint）的属性：background、color、box-shadow 等
仅触发合成（Composite）的属性：transform、opacity（最高效）
实用动画示例
淡入上移效果
脉冲效果
摇晃效果
浏览器兼容性
CSS动画已获得广泛支持，自 2015年9月 起在所有主流浏览器中可用：
- Chrome 43+
- Firefox 16+
- Safari 9+
- Edge 12+
- Opera 30+