我试图使用普通的CSS逐渐淡入淡出,并且在列表中没有jquery,因此它可以逐个淡入淡出.但是,我只知道如何在有限的列表中执行此操作.我如何循环css所以无论我有多少列表它仍然有效.
这是我做的:
.ladder {
opacity: 0;
-webkit-animation: fadeIn 0.9s 1;
animation: fadeIn 0.9s 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.ladder:nth-child(5n+1) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.ladder:nth-child(5n+2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.ladder:nth-child(5n+3) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.ladder:nth-child(5n+4) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.ladder:nth-child(5n+5) {
-webkit-animation-delay: 1.0s;
animation-delay: 1.0s;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0; …