去年做性能优化的时候，我一口气删了页面上大半的动画，理由很充分：占用主线程、拉长可交互时间、在低端机上直接掉帧。 今年又把一部分加回来了。不是我反悔，是当时的判断太粗。 什么样的动画该留 我现在的标准是三条： 它是否解释了两个状态之间的关系。展开收起、页面转场、列表增删，这类动画帮助理解"东西从哪来、到哪去"，值得留。 它是否给操作反馈。按钮按下、输入校验、复制成功，这类动画让用户确认"我确实点到了"。 它是否只在无意义地动。漂浮、呼吸、无限旋转的装饰，删。 按这个标准，去年删掉的东西里大概一半是冤枉的。 性能怎么做 留归留，成本还是要控： 只动 transform 和 opacity，不碰会触发布局的属性 时长控制在 150–250ms，超过 300ms 的操作类动画会觉得"卡" 用 will-change 要谨慎，用完就撤，否则会一直占着一层 还有一条必须做：尊重 prefers-reduced-motion。系统开了减少动态效果，就把位移和缩放全部降级成透明度渐变。 这段 CSS 不长，但它决定了你的页面会不会让人头晕。这不是"最佳实践"，是底线。
