我想要为一个元素设置动画,然后再为另一个元素设置动画,这可以用 CSS 实现吗?我似乎无法让它工作here http://jsbin.com/licapepose/1/edit?html,css,output到目前为止我的尝试。
我有两个主要问题:
1)我的动画没有发生。
2)当它确实发生时,它会同时为每个元素设置动画,我想要的是在最后一个元素完成时为下一个元素设置动画。 CSS有这样的能力吗?
3)我希望它是无限的。
我想我有名字 3,但我的动画无法播放,所以我无法测试它。我正在尝试制作加载动画,理想情况下我不想使用 JS,因为我认为这是不好的做法?
您需要添加不同的animation-delay
到所有元素。
演示使用animation-direction: alternate
--->jsbin http://jsbin.com/duqojuxera/2/edit
@keyframes load {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.e {
width: 100%;
height: 30px;
opacity: 0;
}
.one {
background: red;
-webkit-animation: load 5s infinite;
animation: load 5s infinite;
}
.two {
background: green;
-webkit-animation: load 5s infinite 1s;
animation: load 5s infinite 1s;
}
.three {
background: yellow;
-webkit-animation: load 5s infinite 2s;
animation: load 5s infinite 2s;
}
.four {
background: pink;
-webkit-animation: load 5s infinite 3s;
animation: load 5s infinite 3s;
}
.five {
background: purple;
-webkit-animation: load 5s infinite 4s;
animation: load 5s infinite 4s;
}
<div class="e one"></div>
<div class="e two"></div>
<div class="e three"></div>
<div class="e four"></div>
<div class="e five"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)