CSS3 动画完全指南

CSS3 让网页动效不再依赖 JavaScript，两条路径：Transition（过渡）和 Animation（关键帧）。

Transition 过渡

适合简单状态切换，如悬停、聚焦：

.button {
  background: #3b82f6;
  transition: background 0.3s ease;
}
.button:hover {
  background: #2563eb;
}

关键参数：property（属性）、duration（时长）、timing-function（缓动）、delay（延迟）。

Animation 关键帧

适合复杂多阶段动画：

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}
.element {
  animation: slideIn 0.5s ease-out forwards;
}

性能优化要点

• 优先使用 transform 和 opacity（走 GPU 合成，不触发重排）
• 避免动画 width/height（会触发重排）
• 动画时长控制在 200-600ms 之间最自然

掌握 CSS3 动画，能让界面从"能用"变成"好用"。