跳到主要内容

CSS3 过渡与动画的基础玩法

· 阅读需 2 分钟
一介布衣
一介布衣
全栈开发者 / 技术写作者

2013 年做前端时，大家会明显感受到一个变化：原来很多必须靠 JavaScript 才能做的动效，开始慢慢可以交给 CSS3 了。

transition 为什么让人喜欢​

它最吸引人的地方就是简单。只要元素状态变化，过渡效果就能自然出现。

.btn {
  background: #3b82f6;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #2563eb;
}

这种能力在当年很实用，因为很多 hover、展开、淡入效果终于不用全靠脚本硬做。

animation 更适合做完整动作​

如果 transition 更像“状态变化过渡”，那么 animation 就更适合那种完整的一段动作逻辑。

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

.panel {
  animation: fadeIn 0.4s ease;
}

什么时候该选 transition，什么时候该选 animation​

如果只是按钮 hover、面板展开、颜色变化这类“有起点也有终点”的状态切换，transition 通常已经够用；如果是轮播、淡入淡出、循环效果、分段动作，那 animation 更合适。

把这两个能力分清楚，能避免很多“为了一个简单效果写一大串 keyframes”的过度设计。

动效不只是好看，还影响交互感受​

2013 年大家刚开始系统使用 CSS3 动效时，最明显的好处其实是页面变得更顺滑。哪怕只是一个按钮颜色渐变、一个弹层淡入，用户也会感受到界面不再那么生硬。这类细节，后来慢慢就成了前端体验设计的一部分。

小结​

CSS3 动画在 2013 年开始流行，并不是因为它花哨，而是因为它让页面交互终于能更轻量地实现。理解 transition 和 animation 的边界，是那个阶段很重要的一步。