html - CSS3、HTML 慢动画 'train'

Question

请帮我解决动画问题，这里是链接和代码:

https://fiddle.jshell.net/gvopk1qe/37/

问题描述:

这个“火车”是无穷大的，但是一旦黄色矩形被蓝色矩形覆盖之后。你看到黄色、黑色、红色、蓝色矩形，然后应该又是黄色、黑色、红色和蓝色，但黄色被蓝色覆盖。

请帮我解决这个问题。 谢谢。

Answer 1

确切问题:使用了 animation-delay 属性。每次开始动画之前都会延迟指定的时间。因此，第一个周期是好的，但第二个周期之后一切都坏了。

建议的修复

我会说不要使用 animation-delay 属性，而是安排 div，使它们彼此相邻，然后为它们设置动画。

示例片段:

/* steps animation */

.steps-animation {
  position: relative;
  width: 1200px;
  height: 250px;
  float: left;
  background: lightgrey;
  border: 1px solid black;
  overflow: hidden;
}
.steps-animation span {
  display: inline-block;
  position: relative;
  top: 32%;
  left: -100%;
  width: 160px;
  height: 80px;
  margin-left: 100px;
  -webkit-animation: stepmoveone 6s linear infinite;
  animation: stepmoveone 6s linear infinite;
}
.steps-animation .step1 {
  background: yellow;
}
.steps-animation .step2 {
  background: black;
}
.steps-animation .step3 {
  background: red;
}
.steps-animation .step4 {
  background: blue;
}
@keyframes stepmoveone {
  to {
    left: 100%;
  }
}

<div class="steps-animation">
  <span class="step1"></span>
  <span class="step2"></span>
  <span class="step3"></span>
  <span class="step4"></span>
</div>

**需要根据需要编辑margin-left，高度和宽度。