简化 @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，这些都比删几个百分比帧影响更大。
