很多开发者觉得网页动效必须用 JavaScript 写。其实 CSS 早就具备了强大的动画能力，而且性能更好、代码更少。

为什么优先用 CSS？

CSS 动画由浏览器原生渲染，不需要 JavaScript 参与 DOM 操作，流畅度更高，CPU 占用更低。对于简单的过渡、淡入淡出、位移效果，CSS 是最佳选择。

三个核心概念

1. transition（过渡）

最基础的动画形式。比如鼠标悬停时，按钮从灰色变成蓝色，颜色变化是平滑的而不是跳变的。

写法很简单：transition: all 0.3s ease;——这行代码告诉浏览器，所有属性变化都用 0.3 秒、缓动效果来过渡。

2. @keyframes（关键帧）

定义动画的每一步。比如一个元素从左边滑入、放大、然后停在中间——你可以精确控制每个阶段的状态。

这是 CSS 动画最强大的部分，可以做出复杂的序列效果。

3. animation（动画属性）

把关键帧和元素绑定起来，设置持续时间、循环次数、延迟时间等参数。

实战：做一个加载动画

很多网站的 loading 效果只用 CSS 就能实现。比如三个小圆点上下跳动——用 @keyframes 控制每个圆点的 translateY 属性，加上不同的 animation-delay，就能做出波浪效果。

性能小贴士

– 只动画 transform 和 opacity（不会触发重排）
– 避免动画 width/height/top/left（性能差）
– 用 will-change 提前告诉浏览器哪些元素会动
– 动画结束记得加 animation-fill-mode: forwards

进阶推荐

CSS 动画学熟了之后，可以试试 GSAP（JavaScript 动画库）和 Framer Motion（React 生态）。但记住：能不用 JS 就不用。

好的动效不是炫技，是让用户体验更自然、更流畅。