CSS动画问题：横向移动翻转无限循环动效异常排查

问题原因分析 #

• 多动画冲突：你写了两个独立的animation属性，后面的会直接覆盖前面的，所以只有一个动画能生效。多个动画需要合并到同一个animation属性中，用逗号分隔。
• 延迟无法循环触发：单独给翻转动画设置6s延迟，infinite只会重复翻转动画本身，延迟仅在第一次动画启动前生效，后续循环不会再等待延迟时间，导致无法实现“移动完成后翻转”的循环逻辑。

优化后的完整代码 #

@keyframes walkAndFlip {
  0% {
    left: 0;
    transform: scaleX(1); /* 初始面向右侧 */
  }
  100% {
    left: calc(100vw - 120px); /* 适配屏幕宽度，避免元素移出可视区 */
    transform: scaleX(-1); /* 移动到终点后面向左侧 */
  }
}

img {
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  /* alternate让动画正向、反向交替播放，自动实现往返+翻转循环 */
  animation: walkAndFlip 6s linear alternate infinite;
}

<img id="img" src="https://i.sstatic.net/PYgYB.gif" alt="行走的角色" />

代码逻辑说明 #

1. 整合动画逻辑：把移动和翻转效果合并到同一个@keyframes中，避免多动画冲突，同时保证移动和翻转的同步性。
2. 适配不同屏幕：用calc(100vw - 120px)代替固定的1100px，确保元素移动到屏幕边缘时不会超出可视区域。
3. 自动循环往返：animation-direction: alternate（即alternate关键字）会让动画在奇数次正向播放（从左到右+翻转），偶数次反向播放（从右到左+恢复正向），无需额外设置延迟或单独的翻转动画，就能实现无限循环的往返移动+方向翻转效果。

对原问题的补充说明 #

如果一定要分开写两个动画，正确的多动画声明方式是：

img {
  animation: walking 6s linear infinite, fliping 1s linear 6s infinite;
}

但这种方式下，翻转动画只会在第一次移动完成后触发一次，之后会持续重复翻转，无法和移动动作同步循环，所以不推荐这种写法。

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