CSS 动画与 Houdini，渐进增强比炫技更稳

CSS 动画与 Houdini，渐进增强比炫技更稳

CSS 新能力可以减少 JavaScript，但页面不能因为浏览器不支持某项特性就失去基本功能。先完成可用布局，再叠加动画和 Houdini。

布局选择贴合问题

一维排列优先 Flexbox，二维网格优先 Grid。容器查询适合组件随自身宽度变化，媒体查询仍负责视口级布局。不要为了使用新语法重写本来清楚的结构。

.card { transition: transform 160ms ease, opacity 160ms ease; } @media (prefers-reduced-motion: reduce) { .card { transition: none; } }

动画只改合适属性

优先 transform 与 opacity，避免每帧触发布局和大面积重绘。Houdini 特性通过@supports检测，并准备静态回退样式。

验证不止看截图

检查键盘焦点、减少动态效果、低性能设备和高对比模式。动画流畅但让内容难以操作，不是优化。