html动画如何延迟,html – CSS动画延迟和关键帧

我想如果你想要像这样的特定场景的动画,使用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