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