Question

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

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

问题描述：

这班火车＆＃39;是无限的，但一旦黄色矩形被蓝色矩形覆盖。你会看到黄色，黑色，红色，蓝色的矩形，然后再次变成黄色，黑色，红色和蓝色，但黄色被蓝色覆盖。

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

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，身高和宽度。

Answer 2

问题在于调整。我没有太多动画，但我想我知道这是什么问题。动画在此行上设置了一个循环

动画：stepmoveone Xs线性无限;

这将最初等待X秒，但也会以X秒间隔显示动画。因此动画完成需要X秒。在你的代码中你将X设置为18秒，但这与最后一个div（蓝色的）等待动画的时间相同。因此，当动画的新周期开始时，它将完全生动。但是当发生这种情况时，黄色div会出现，所以它们中的两个会重叠。
您可以通过将黄色div的延迟时间更改为1来进行检查。要解决此问题，您可以将动画时间更改为24
这是代码但是改变了秒数：

/* steps animation */

.steps-animation {
  position: relative;
  width: 800px;
  height: 250px;
  float: left;
  background: lightgrey;
  border: 1px solid black;
  overflow: hidden;
}

.steps-animation span {
  display: block;
  position: absolute;
  top: 32%;
  left: -100%;
  width: 160px;
  height: 80px;
  -webkit-animation: stepmoveone 8s linear infinite;
  animation: stepmoveone 8s linear infinite;
}

.steps-animation .step1 {
  animation-delay: 0s;
  background: yellow;
}

.steps-animation .step2 {
  animation-delay: 2s;
  background: black;
}

.steps-animation .step3 {
  animation-delay: 4s;
  background: red;
}

.steps-animation .step4 {
  animation-delay: 6s;
  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>

此代码将在每个元素之间留出2秒的间隙。

Answer 3

将 .steps-animation width 设置为 100％＆amp;＆amp; .steps-animation span 至其宽度为负以隐藏框架

Check the fiddle

CSS3，HTML慢动画＆＃39; train＆＃39;

3 个答案: