CSS3 动画别一开始就追求炫

CSS3 动画刚流行起来的时候，很多前端最直观的感受就是“终于能做出以前很费劲的效果了”。我当时也一样，看到元素能平滑移动、淡入淡出、缩放旋转，很容易就想把这些能力都塞进页面里。但真正做了几轮页面后，我慢慢发现，动画如果先追求炫，最后往往会伤体验。

页面需要的不是“有动画”，而是“为什么动”

用户看见一个元素动起来，脑子里会自然问一个问题：它为什么动？
如果动画只是为了展示技术存在感，那它很快就会变成视觉噪音。
可如果动画是在表达层级变化、操作反馈或者状态切换，用户就会觉得它自然。

所以我现在更喜欢先回答目的，再选效果。

我最常用动画解决的其实是三类问题

• 告诉用户某个动作已经触发
• 帮助视线跟随界面变化
• 缓和突然出现或消失的内容

这些需求都不需要特别夸张的效果，反而更适合节奏克制、时长稳定、位移不大的动画。

为什么“炫”常常会变成负担

因为炫的动画通常有几个副作用：

• 持续时间太长
• 同时动的元素太多
• 方向和节奏不稳定

页面一旦进入这种状态，信息层级会被打乱，用户甚至会开始等动画结束，而不是继续完成任务。

我后来更愿意怎么做

比起一上来就做复杂关键帧，我更常从下面这些简单动作开始：

• hover 的轻微过渡
• 面板出现时的小幅淡入
• 按钮状态变化时的反馈

这些变化看起来不炸眼，但更接近真实产品节奏。

小结

CSS3 动画的价值不在于“能做多厉害”，而在于“有没有帮页面表达更清楚”。
2013 年学这些能力时最容易犯的错，就是把动画当主角。后来我越来越认同，动画最好从目的出发，而不是从特效出发。