CSS动画性能关键在属性选择与控制：width/height/top/left等触发重排，box-shadow/filter等易致重绘；应优先使用transform和opacity等合成属性；需限制并发数量、视口外暂停、交互动画≤300ms，并合理设置时长与缓动。
CSS动画对性能的影响取决于具体使用方式，不是动画本身“慢”，而是不当的实现容易触发重排（reflow）和重绘（repaint），尤其在中低端设备或复杂页面中会明显卡顿。
哪些CSS属性动画最伤性能
改变 width、height、top、left、margin、padding 等会触发布局计算的属性，浏览器必须重新计算元素位置和周围元素关系，开销大。同理，box-shadow、border-radius（尤其配合动画）、filter 在某些场景下也会导致频繁重绘或使用软件渲染。
推荐优先使用仅触发 合成（compositing） 的属性：
- transform（如 translateX/Y/Z、scale、rotate）
- opacity
控制动画数量与并发行为
同时运行几十个复杂动画（比如列表项逐个淡入+位移+缩放）会让主线程持续忙碌，尤其在滚动中叠加动画极易掉帧。
实用建议：
- 视口外的动画暂停或降级（用
IntersectionObserver检测是否可见） - 交互反馈类动画（如按钮点击）保持简短（≤300ms），避免用户等待感
- 非关键动效（如背景粒子、装饰性浮动）设为
will-change: transform前谨慎评估，必要时用@media (prefers-reduced-motion)关闭
合理设置持续时间与缓动
过长的动画（如 >1s）不仅拖慢视觉节奏，还可能因持续占用渲染资源影响其他任务；过短（
立即学习“前端免费学习笔记（深入）”；
经验参考：
- 微交互（图标切换、开关状态）：150–250ms
- 页面过渡（路由切换、模态框出现）：300–450ms
- 避免使用
ease-in或ease-out开头/结尾过慢的缓动，易造成“卡顿假象”；推荐ease-in-out或自定义 cubic-bezier(0.34, 1.56, 0.64, 1)
别忽略硬件与环境适配
CSS动画在桌面 Chrome 上很顺，但在 iOS Safari 或旧版 Android WebView 中，GPU 加速可能受限，transform: scaleZ(1) 或 translateZ(0) 曾是常见 hack，但现在更推荐用 will-change: transform（仅在必要时加，且用完及时移除）。
还可以：
- 用
prefers-reduced-motion媒体查询自动关闭动画 - 通过
requestIdleCallback或节流控制批量动画初始化时机 - 用 Chrome DevTools 的 Rendering 面板开启 “FPS Meter” 和 “Paint Flashing” 实时观察性能瓶颈
