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;这段片段保留原样只用于说明接口形态接入项目时仍要补齐类型、错误和测试。