简化 @keyframes 能缓解低端设备掉帧，因其减少每帧计算与合成负担，避开触发重排 / 重绘的属性（如 width、box-shadow），仅用 transform 和 opacity 等硬件加速属性，并配合 will-change 或 translateZ(0) 启用 GPU 加速。
为什么 简化 @keyframes 能缓解低端设备掉帧
低端设备（如旧款 安卓 手机、入门级 平板 ）GPU 性能弱、主线程调度压力大，而 CSS 动画若包含过多关键帧、复杂属性或频繁重排 / 重绘 ，会直接触发强制同步布局或软件渲染，导致帧率跌破 30fps。简化 @keyframes 的本质是减少 浏览器 每帧需计算和合成的量，尤其避开触发重排（layout）和重绘（paint）的属性。
哪些 keyframes 属性最容易引发掉帧
以下属性在动画中应尽量避免或严格控制：
-
width、height、left、top、margin、padding：触发重排，代价极高 -
box-shadow、border-radius（尤其配合 transform 动画时）、filter（如blur()）：增加每帧光栅化负担 - 过多中间帧（如从
0%到100%插入 8 个12.5%、25%……）：增加样式计算开销，且对视觉提升有限
怎么简化 keyframes 才真正有效
不是删掉几行就完事——要聚焦「可被 硬件加速」且「计算轻量」的组合：
- 只用
transform（translateX、translateY、scale、rotate）和opacity：这两类属性由合成器线程处理，不触发布局或绘制 - 把多段动画合并为单段关键帧：例如原先是
0% → 30% → 70% → 100%四段变化，尝试压缩为0% → 100%加ease-in-out或自定义cubic-bezier - 避免在
@keyframes中写!important或内联calc()表达式（尤其含 viewport 单位），部分低端 WebView 解析慢
@keyframes slide-in {/* 好：仅 transform + opacity，两帧足够 */ 0% { opacity: 0; transform: translateX(-20px); } 100% {opacity: 1; transform: translateX(0); } }还有比简化 keyframes 更关键的一步
即使 keyframes 很干净，如果元素没开启硬件加速，动画仍可能掉帧。必须加 will-change: transform 或兜底的 transform: translateZ(0)，但注意：will-change 不宜滥用（如全页面加），应在动画开始前动态添加、结束后移除。
立即学习 “ 前端免费学习笔记（深入）”；
另外，检查是否启用了 prefers-reduced-motion，在低端设备上用户更可能开启此设置，此时应主动降级动画：
@media (prefers-reduced-motion: reduce) {* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;} }真正卡顿的根源常不在 keyframes 写得多不多，而在是否让浏览器“知道它该走哪条快路”。没加 transform 触发层叠上下文、没控制动画元素层级、或父容器有 overflow: hidden 却未设 contain: layout paint，这些都比删几个百分比帧影响更大。
