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

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

问题描述:

这种“火车”是无限的,但是一旦黄色矩形被蓝色矩形覆盖。您会看到黄色,黑色,红色,蓝色矩形,然后又应该是黄色,黑色,红色和蓝色,但黄色被蓝色覆盖。

请帮助我解决此问题。
谢谢。

最佳答案

确切的问题:使用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,高度和宽度。

关于html - CSS3,HTML慢速动画“训练”,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37836132/

10-11 23:23
查看更多