CSS无限交替动画运行卡顿有断点，如何实现无停顿流畅运行？

现有代码问题排查 #

• 存在重复定义的60%关键帧，两个同百分比关键帧属性不同会导致动画运行到该节点时出现突变跳变，产生明显断点
• 动画配置了ease缓动函数，该函数自带开始加速、结束减速的效果，配合alternate反向播放设置，在正反向播放衔接点会出现明显停顿
• 使用width属性实现宽度变化动画，会持续触发浏览器重排（reflow），性能开销高，配置较低的设备上容易出现掉帧卡顿
• 仅定义了带-webkit-前缀的关键帧，非webkit内核浏览器无法识别，会导致动画加载异常

优化后代码 #

CSS代码 #

.line{
   height: 3px;
   margin: 0 auto;
   margin-bottom: 20px;
   /* 固定基础宽度，改为用transform实现缩放 */
   width: 160px;
   transform-origin: left;
   /* 改用linear线性匀速，取消alternate，保证循环衔接无停顿 */
   animation: colorchange 5s linear infinite;
   /* 开启硬件加速，提升渲染性能 */
   transform: translateZ(0);
   will-change: transform, background-color;
}

/* 标准无前缀关键帧，兼容所有现代浏览器 */
@keyframes colorchange {
     0%{
       background-color: blue;
       transform: scaleX(0.875); /* 对应原宽度140px：140/160=0.875 */
     }
     20%{
       background-color: #8e44ad;
       transform: scaleX(1); /* 对应原宽度160px */
     }
     40%{
      background-color: #1abc9c;
      transform: scaleX(0.75); /* 对应原宽度120px：120/160=0.75 */
     }
     60%{
       background-color: #d35400;
       transform: scaleX(1);
     }
     80% {
       background-color: #34495e;
       transform: scaleX(1);
     }
     100% {
       /* 100%属性与0%完全一致，循环衔接无跳变断点 */
       background-color: blue;
       transform: scaleX(0.875);
     }
}

/* 兼容旧版webkit内核浏览器 */
@-webkit-keyframes colorchange {
     0%{
       background-color: blue;
       -webkit-transform: scaleX(0.875);
     }
     20%{
       background-color: #8e44ad;
       -webkit-transform: scaleX(1);
     }
     40%{
      background-color: #1abc9c;
      -webkit-transform: scaleX(0.75);
     }
     60%{
       background-color: #d35400;
       -webkit-transform: scaleX(1);
     }
     80% {
       background-color: #34495e;
       -webkit-transform: scaleX(1);
     }
     100% {
       background-color: blue;
       -webkit-transform: scaleX(0.875);
     }
}

HTML代码 #

<div class="line"></div>

核心优化说明 #

1. 删除重复的关键帧定义，调整100%关键帧属性与0%完全匹配，循环播放时不会出现属性跳变
2. 替换ease为linear线性缓动，全程匀速运动无首尾减速效果，取消alternate配置，避免正反向切换的停顿
3. 用transform: scaleX()替代width实现宽度变化，仅触发合成层渲染，无需重排，大幅降低性能开销，配合硬件加速配置进一步提升流畅度
4. 补充标准无前缀的关键帧规则，兼容全平台现代浏览器

内容的提问来源于stack exchange，提问作者Shanid P