多@keyframes动画迭代次数>1时animation-timing-function异常求助

问题现象 #

• 0-1s：小球匀速从左到右（符合预期）
• 1-2s：到达右端后匀速返回左端（符合预期）
• 2-3s：再次向右移动时出现正加速度，疑似使用ease-in曲线（不符合预期）
• 3-4s：到达左端后匀速返回右端（符合预期）
• 4s后：重复2-4s的异常循环

注：合并两个@keyframes不是可行解决方案

原异常代码 #

.animated{
  animation-name: left2right, right2left;
  animation-direction: normal;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0s, 1s;
  animation-fill-mode: backwards, none;
  animation-timing-function: linear;
}
@keyframes left2right {
  0% { left: 0%; }
  50% { left: 100%; }
}
@keyframes right2left {
  0% { left: 100%; }
  50% { left: 0%; } 
}

问题原因 #

原代码中两个动画时长为2s，仅在前1s（50%进度）完成移动，后1s保持状态。进入第二次循环后，两个动画会同时作用于left属性：一个动画尝试从0%向100%移动，另一个动画保持0%状态，浏览器的属性值合成逻辑导致移动速度出现异常变化。

解决方案 #

调整动画时长为1s（单次方向移动时间），让两个动画交替独立执行，避免属性修改冲突：

.animated{
  animation-name: left2right, right2left;
  animation-direction: normal;
  animation-duration: 1s, 1s; /* 每个动画1s完成单次移动 */
  animation-iteration-count: infinite;
  animation-delay: 0s, 1s; /* 第二个动画延迟1s启动，与第一个错开 */
  animation-fill-mode: none, none; /* 动画结束后不保留状态，避免干扰 */
  animation-timing-function: linear, linear; /* 确保每个动画都是匀速 */
}
@keyframes left2right {
  0% { left: 0%; }
  100% { left: 100%; } /* 覆盖整个动画周期，明确移动过程 */
}
@keyframes right2left {
  0% { left: 100%; }
  100% { left: 0%; } /* 覆盖整个动画周期，明确移动过程 */
}

说明 #

• 每个动画时长设为1s，刚好完成单次方向的匀速移动
• 通过animation-delay让两个动画错开1s启动，实现交替执行，避免同时修改left属性
• 关键帧覆盖100%周期，确保动画过程清晰，无中间状态歧义
• 统一设置animation-fill-mode: none，防止动画结束后的状态残留影响后续循环

内容的提问来源于stack exchange，提问作者Samu Pecsenye