CSS 动画完全入门指南

CSS 动画是前端开发中性价比最高的技能之一——几行代码就能让静态页面"活"起来，而且不需要加载任何第三方库。本指南从零开始，带你掌握 CSS 动画的所有核心概念。

两种动画方式

CSS 提供了两种动画机制，分别适用于不同场景：

	Transition（过渡）	Animation（动画）
触发方式	需要状态变化（hover/focus/添加类）	自动播放或通过类名控制
复杂度	简单，两个状态之间平滑过渡	复杂，可定义多个关键帧
循环	不支持自动循环	支持 `infinite` 无限循环
典型场景	悬停效果、按钮反馈	Loading 动画、背景动画

Transition 示例

css

.box {
  width: 100px; height: 100px;
  background: #667eea;
  transition: transform 0.3s ease, background 0.3s;
}
.box:hover {
  transform: scale(1.2);
  background: #764ba2;
}

transition 语法拆解：

transform —— 要过渡的属性（可以用 all 监听所有属性）
0.3s —— 动画持续时间
ease —— 缓动函数（控制速度变化曲线）

Animation + @keyframes 示例

css

.spinner {
  width: 40px; height: 40px;
  border: 4px solid #eee;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

animation 语法拆解：

spin —— @keyframes 的名字
0.8s —— 一个周期的时长
linear —— 匀速旋转
infinite —— 无限循环

缓动函数（Easing）

缓动函数决定了动画的"感觉"。CSS 内置了这些常用值：

值	效果
`ease`（默认）	慢→快→慢，最自然
`linear`	匀速，适合旋转
`ease-in`	慢→快，适合元素离开
`ease-out`	快→慢，适合元素进入
`ease-in-out`	慢→快→慢，比 ease 更平滑

你还可以用 cubic-bezier() 自定义缓动曲线：

css

/* 弹性回弹效果 */
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

常用的可动画属性

不是所有 CSS 属性都适合动画。以下属性的动画性能最好（GPU 加速，不触发重排）：

transform：平移 translate()、缩放 scale()、旋转 rotate()、倾斜 skew()
opacity：透明度
filter：模糊 blur()、亮度 brightness() 等

避免动画这些属性（触发重排，性能差）：

width / height
margin / padding
left / top / right / bottom

经验法则：用 transform: scale(1.1) 代替 width: 110%，用 transform: translateX(10px) 代替 left: 10px。

性能优化建议

只用 transform 和 opacity 做动画——这两个属性由 GPU 合成器处理，不触发重排/重绘
动画元素加 will-change ——提前告诉浏览器这个元素将要变化：
css
```
.animated { will-change: transform; }
```
动画完就移除 will-change——长时间保留会过度消耗 GPU 内存
控制动画数量——同一页面同时动画的元素不要太多（移动端尤其注意）

使用 prefers-reduced-motion——尊重用户的系统动画偏好：

css

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

进阶资源

浏览本站 14 个分类、200+ 个精选 CSS 动画效果，每个都附带完整代码：

Hover 悬停效果合集 — 35 种悬停动画
Loading 加载动画合集 — 18 种加载指示器
按钮动画合集 — 20 种按钮动效
文字动画合集 — 21 种文字特效
背景动画合集 — 15 种背景特效
滚动动画合集 — 19 种滚动触发效果

友链

更多相关站点

CSS 动画完全入门指南 ​

两种动画方式 ​

Transition 示例 ​

Animation + @keyframes 示例 ​

缓动函数（Easing） ​

常用的可动画属性 ​

性能优化建议 ​

进阶资源 ​

友链