动画性能优化
动画做多了页面会卡。秘诀是只动画“合成属性”：transform 和 opacity——它们在 GPU 合成层处理，不触发布局重排；而动画 width、top、box-shadow 会触发重排/重绘，掉帧明显。
另一个性能手段是 will-change: transform，提前告诉浏览器“这个元素要变形”，浏览器会为它开独立合成层。但也别滥用：层太多反而占显存。手机上还要尊重用户的“减少动态”偏好。
- 只动 transform / opacity，不动 width/top/left
- box-shadow 动画昂贵：可用伪元素 opacity 切换模拟
- 用 @media (prefers-reduced-motion: reduce) 关闭动画照顾敏感用户
- will-change 是“预告”，用完（动画结束）应移除
HTML
<style> /* 反面：动 width -> 重排，卡 */ .bad { width: 100px; height: 40px; background: #e5534b; transition: width 1s; } .bad:hover { width: 300px; } /* 正面：动 transform -> 合成层，流畅 */ .good { width: 100px; height: 40px; background: #4a9eff; transition: transform 1s; will-change: transform; } .good:hover { transform: scaleX(3); transform-origin: left; } _wrap { display: flex; flex-direction: column; gap: 12px; padding: 24px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } </style> <div class="_wrap"> <div class="bad"></div> <div class="good"></div> </div>
本节要点只动 transform/opacity（GPU 合成）；box-shadow/top/width 触发重排；照顾 prefers-reduced-motion。
