CSS Animation无法播放：Logo首段动画跳过直接执行第二段问题求助

你遇到的核心问题是同时绑定了两个并行的无限循环动画，导致动画状态冲突：

• 第二个动画move-left虽设置了1s延迟，但它的初始关键帧from是translateX(0%)，延迟结束后会强制将元素的transform重置为0，直接覆盖第一个动画move-right的执行结果，所以看起来第一个动画根本没运行，直接跳转到第二个动画逻辑。
• 另外animation-fill-mode: forwards, none的设置也不合理，forwards会让第一个动画停在结束状态，但第二个动画启动后会立刻覆盖这个状态。

实现“向右移动200px后平滑返回原位置”的效果，用单个动画循环就能完成，代码更简洁且无冲突：

/* LOGO MAIN STYLE */
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

/* ANIMATION FOR THE LOGO */
.App-logo {
  animation: move-right-back 2s ease-in-out infinite;
}

@keyframes move-right-back {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

• 单个动画move-right-back包含三个关键帧：0%（初始位置）、50%（向右移动200px）、100%（返回原位置）
• 动画总时长设为2s，刚好是“右移1s + 返回1s”的时间，配合ease-in-out实现平滑过渡
• infinite让动画循环执行，满足需求

如果坚持要用两个动画的方式（不推荐），需调整执行顺序和填充模式，确保第二个动画基于第一个的结束状态启动：

/* LOGO MAIN STYLE */
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

/* ANIMATION FOR THE LOGO */
.App-logo {
  animation: move-right 1s ease-in-out forwards, move-back 1s ease-in-out 1s infinite alternate;
}

@keyframes move-right {
  to {
    transform: translateX(200px);
  }
}

@keyframes move-back {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0);
  }
}

这里用alternate让move-back动画反向循环实现来回移动，同时第二个动画的from设为第一个动画的结束位置，避免状态重置。

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