CSS 动画并不难：从入门到写出丝滑效果

两个关键属性

CSS 动画的入门其实只需要理解两个东西：transition 用于状态切换，animation 用于持续动画。选对了就成功了一半。

过渡动画最简单也最常用。一个按钮从正常状态到 hover 状态，你只需要告诉浏览器"哪些属性变了、用多长时间、什么速度曲线"。transition: all 300ms ease-out 这句话写下去，按钮就有了生命。

关键帧动画适合更复杂的场景。比如我博客 Hero 区域的粒子动画和波浪效果，都是通过 @keyframes 定义的。定义好关键帧之后，用 animation 属性指定时长、延迟、循环次数、方向，剩下的交给浏览器。

性能小技巧

只对 transform 和 opacity 做动画，尽量避免 width、height、left、top 这些会触发回流的属性。transform: scale(1.05) 和 width: 105% 看起来效果差不多，但前者只在 GPU 层面处理，后者会导致整个布局重新计算。

另一个容易被忽略的是 will-change 属性。如果你知道某个元素会频繁动画，提前告诉浏览器，可以避免动画开始时的闪烁。但不要滥用——will-change 会占用额外的 GPU 内存，只在你确实需要的时候使用它。