CSS动画无法直接设置帧率，实际帧率由渲染性能决定；流畅度取决于每帧是否≤16.7ms完成Style→Layout→Paint→Composite，掉帧主因是触发Layout/Paint的属性如width、left等，应优先使用transform和opacity。
CSS 动画本身不能直接设置帧率（如强制 30fps 或 45fps），浏览器会尽力以屏幕刷新率（通常是 60Hz）渲染动画，但最终帧率由渲染性能决定——不是你“设多少就跑多少”，而是“能跑多快就跑多快”。
真正影响流畅度的，是动画是否能在每帧 ≤16.7ms 内完成整个渲染流水线（Style → Layout → Paint → Composite）。卡顿的本质，是某一步耗时超标，导致掉帧。
为什么改 animation-duration 不等于调帧率
很多人误以为把 animation-duration: 0.5s 改成 0.2s 就是“提高帧率”，其实只是让动画更快播完，单帧耗时没变，反而可能因节奏过快暴露性能瓶颈。
-
animation-duration控制的是动画总时长，不是每秒渲染几帧 - 浏览器仍按 requestAnimationFrame 节奏驱动（≈60fps），只是关键帧插值更密集或更稀疏
- 若动画里用了
width、left、background-color等触发 Layout/Paint 的属性，哪怕 duration 是 0.1s，也可能卡成 20fps
.bad-anim {
animation: slideBad 0.2s ease-in;
}
@keyframes slideBad {
0% { left: 0; } /* 触发重排！ */
100% { left: 100px; }
}真正影响帧率的三大 CSS 属性陷阱
掉帧大多来自“不该动的属性被动画化”。浏览器对不同属性的优化程度差异极大：
立即学习“前端免费学习笔记（深入）”；
-
安全（GPU 合成层，只走 Composite）：
transform（含translate3d、scale、rotate）、opacity -
危险（触发 Paint，甚至 Layout）：
width、height、margin、top、background-color、filter（尤其模糊值变化）、box-shadow -
灰色地带（看实现）：
clip-path、mask、will-change（用错反而拖慢）
比如 magic.css 的 puffIn 动画里同时改 transform 和 filter: blur()，后者在低端设备上极易掉帧——删掉 filter 行，帧率常能从 40fps 拉回 60fps。
如何验证和定位掉帧？用 Chrome DevTools 看这三处
别猜，直接录一段动画过程，在 Performance 面板里抓真实瓶颈：
- FPS 曲线图：低于 60 的凹陷处，对应掉帧时刻
- 主线程火焰图：展开长条任务，看是不是 Layout 或 Paint 占满整帧
- 渲染器统计栏（右上角）：点开 “Rendering” → 勾选 “FPS meter”，实时看当前帧率
小技巧：在动画元素上加 will-change: transform, opacity，可提前提示浏览器提升图层。但别滥用——加在 20 个元素上，内存和合成开销反而上升。
.safe-anim {
will-change: transform, opacity;
animation: slideSafe 0.4s ease-out;
}
@keyframes slideSafe {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}关键点容易被忽略：动画流畅 ≠ 视觉效果炫酷。一个用 transform + opacity 实现的淡入滑入，比用 filter + scale + margin 做的“魔法入场”，在中低端安卓机上可能帧率差一倍。选动画库（如 magic.css / Animate.css）时，先看它用的是哪类属性，而不是好不好看。
