CSS 动画与 Houdini：效果进入合成层之前先算成本

CSS 动画与 Houdini：效果进入合成层之前先算成本

CSS 能写出很漂亮的动效，但布局、绘制和合成走的是不同路径。动画属性选错，几行代码就能让主线程每帧重排。

优先动画 transform 和 opacity

它们通常更容易进入合成层，但层数过多也会增加显存。width、filter 或复杂阴影需要在目标设备上测，不凭经验宣布“GPU 加速”。

Houdini 用在明确缺口

自定义属性和 Paint API 适合封装稳定视觉规则，使用前检查浏览器支持与降级样式。不要为一个静态效果引入难调试的运行时代码。

• 尊重 prefers-reduced-motion。
• 交互动画可被键盘操作触发。
• 组件卸载后清理注册与监听。

用 Performance 面板看每一帧

固定元素数量和视口，观察 layout、paint 与 layer。视觉验收同时检查高缩放和不同主题。

动效的目标是帮助理解状态，不是让页面证明自己会动。成本落在预算内，细节才有意义。

原稿中的最小片段

transition: transform 160ms ease, opacity 160ms ease;

这段片段保留原样，只用于说明接口形态；接入项目时仍要补齐类型、错误和测试。