如何让我的动画在无限循环中从左移动到右？

Question

我的动画目前正在以方形运动移动。但是，我希望它从屏幕的左侧移动到右侧，然后在无限循环中再次返回。有人能帮忙吗？

.animation {
  width: 10px;
  height: 10px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: red;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: red;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: red;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}

<div class="animation"></div>

Answer 1

您可以将动画的迭代计数设置为infinite，并通过让开始和结束关键帧（0% 和 100%）共享相同位置来创建无缝循环，如下所示：

.animation {
  width: 10px;
  height: 10px;
  background-color: red;
  position: relative;
  animation: example 2s infinite;
}

@keyframes example {
  0%,
  100% {
    left: 0;
  }

  50% {
    left: 200px;
  }
}

<div class="animation"></div>