为什么CSS keyframes百分比设置不当会导致顿挫？
css @keyframes 中百分比设置不当导致动画出现“顿挫”或“卡顿”，通常是因为关键帧之间的插值计算出现了不连续，或者浏览器在渲染时因性能优化策略（如合成层分离）导致的视觉跳跃。最常见的原因是相邻关键帧的属性值变化量过大且未使用缓动函数，或者是属性类型（如从像素到百分比）不匹配导致浏览器无法平滑过渡。此外，如果动画涉及布局属性（如 width、height），会触发重排（reflow），这比仅触发重绘（repaint）的合成属性（如 transform）要昂贵得多，从而在低帧率设备上表现为明显的卡顿。
如何避免布局属性引发的重排卡顿？
要避免因布局属性引发的重排卡顿，核心原则是尽量只动画化 transform 和 opacity 等合成属性。如果必须改变尺寸或位置，应使用 transform: translate() 代替 top/left，使用 scale() 代替 width/height。这样可以将动画的计算和渲染交给 GPU 处理，确保动画流畅。对于复杂的形状变化，可以使用 d 属性的 SVG 动画，但需注意浏览器对路径插值的兼容性。
/* 错误示例：触发布局重排 */
@keyframes bad-animation {
0% { top: 0; left: 0; }
50% { top: 100px; left: 100px; }
100% { top: 0; left: 0; }
}
/* 正确示例：仅触发合成层重绘 */
@keyframes good-animation {
0% { transform: translate(0, 0); }
50% { transform: translate(100px, 100px); }
100% { transform: translate(0, 0); }
}
当关键帧百分比总和不为100%时会发生什么？
当 @keyframes 中的百分比总和不为 100% 时，浏览器会自动将剩余的时间按比例分配给最后一个关键帧，直到动画结束。这意味着如果定义了一个从 0% 到 80% 的动画，剩下的 20% 时间（即 80% 到 100%）会保持 80% 时的状态不变。这种“悬停”效果有时会被误认为是顿挫，因为动画在最后阶段没有平滑过渡回初始状态。此外，如果省略了 0% 或 100%，浏览器会使用元素的当前样式作为起始或结束状态，这可能导致意外的视觉跳跃。
/* 示例：80%后保持静止直到动画结束 */
@keyframes hover-effect {
0% { opacity: 0; }
80% { opacity: 1; }
/* 80% 到 100% 期间，opacity 保持为 1 */
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
