Nth Child Animation Delay
HTML
<li> First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
CSS
li {
opacity: 0;
-webkit-animation: fadeIn 0.9s 1;
animation: fadeIn 0.9s 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:nth-child(5n+1) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
li:nth-child(5n+2) {
-webkit-animation-delay: 1.0s;
animation-delay: 1.0s;
}
li:nth-child(5n+3) {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
li:nth-child(5n+4) {
-webkit-animation-delay: 2.0s;
animation-delay: 2.0s;
}
li:nth-child(5n+5) {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
/* Animation steps */
@-webkit-keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}