带有 <ul> 的 CSS3 循环动画

Question

我正在尝试将此代码用于网站。
我正在使用 CSS3 关键帧和动画，并带有一个简单的列表

#animation ul { /* The list with elements */
    position: relative;
    text-align: center;
    width: 200px;
}
#animation li { /* Common styles for the list elements */
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    opacity: 0;
    padding: 10px;
}
#animation li:nth-of-type(1) { /* First element of the list */
    background-color: lightgreen;
    
    -webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
    -moz-animation: fadein 6s ease-in-out -4s infinite alternate;
    animation: fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
    background-color: yellow;
    
    -webkit-animation: fadein 6s ease-in-out 0s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 0s infinite alternate;
    animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
    background-color: lightblue;
    
    -webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
    -moz-animation: fadein 6s ease-in-out 4s infinite alternate;
    animation: fadein 6s ease-in-out 4s infinite alternate;
}


/* Defines the animation keyframes */
@-webkit-keyframes fadein {
    0% {           /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */ 
        opacity: 0;
    }
    66% {          /* Actual beginning of the fade in animation */
        opacity: 0;
    }
    76% {          /* The fade in animation takes 10% of the duration time */
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}

<div id="animation">
    <ul>
        <li>This is</li>
        <li>CSS3 looped</li>
        <li>animation</li>

    </ul>
</div>

我想设置 5 个元素而不是 3 个，但是当我用 5 个元素编辑此代码时，结果不一样..

感谢您的帮助！

Answer 1

你必须改变你提到的时间间隔。检查下面的代码。

#animation ul { /* The list with elements */
    position: relative;
    text-align: center;
    width: 200px;
}
#animation li { /* Common styles for the list elements */
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    opacity: 0;
    padding: 10px;
}
#animation li:nth-of-type(1) { /* First element of the list */
    background-color: lightgreen;
    
    -webkit-animation: fadein 6s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
    -moz-animation: fadein 6s ease-in-out -4s infinite alternate;
    animation: fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
    background-color: yellow;
    
    -webkit-animation: fadein 6s ease-in-out 0s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 0s infinite alternate;
    animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
    background-color: lightblue;
    
    -webkit-animation: fadein 6s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
    -moz-animation: fadein 6s ease-in-out 4s infinite alternate;
    animation: fadein 6s ease-in-out 4s infinite alternate;
}
#animation li:nth-of-type(4) { /* fourth element of the list */
background-color: pink;

-webkit-animation: fadein 6s ease-in-out 8s infinite alternate; /* delay = duration * 66% */
-moz-animation: fadein 6s ease-in-out 8s infinite alternate;
animation: fadein 6s ease-in-out 8s infinite alternate;
}
#animation li:nth-of-type(5) { /* fifth element of the list */
background-color: red;

-webkit-animation: fadein 6s ease-in-out 12s infinite alternate; 
-moz-animation: fadein 6s ease-in-out 12s infinite alternate;
animation: fadein 6s ease-in-out 12s infinite alternate;
}


/* Defines the animation keyframes */
@-webkit-keyframes fadein {
    0% {           /* "Delay" of the animation - 66% of the duration time (100 - 100/number of elements) */ 
        opacity: 0;
    }
    66% {          /* Actual beginning of the fade in animation */
        opacity: 0;
    }
    76% {          /* The fade in animation takes 10% of the duration time */
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    76% {
        opacity: 1;
    }    
    100% {
        opacity: 1;
    }    
}

<div id="animation">
    <ul>
        <li>This is</li>
        <li>CSS3 looped</li>
        <li>animation</li>
        <li>example</li>
        <li>here</li>
    </ul>
</div>