我想如果你想要像这样的特定场景的动画,使用GreenSock会更好.
这是我用HTML和CSS最接近的,我还需要复制< li>适合你的场景.
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
position: absolute;
opacity: 0;
}
li:nth-child(6) {
/*The last item always on the top, direction will goes from last to first*/
animation: xfade 15s;
}
li:nth-child(5) {
/*Put animation length double the delay (in this case delay is the actual animation length)*/
animation: xfade 30s 15s;
}
li:nth-child(4) {
animation: xfade 30s 15s;
}
li:nth-child(3) {
animation: xfade 30s 15s;
}
li:nth-child(2) {
animation: xfade 30s 15s;
}
li:nth-child(1) {
opacity: 1;
}
@keyframes xfade{
0%{opacity:0}
33% {opacity:1;}
100%{opacity:0}
}
- 1
- 2
- 3
- 4
- 5
- 6