请帮助我解决动画问题,这是链接和代码:
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/