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检测并准备静态回退样式。验证不止看截图检查键盘焦点、减少动态效果、低性能设备和高对比模式。动画流畅但让内容难以操作不是优化。