CSS3 loop animation with <ul> - css

Question

I'm trying to use this code for a website.
I'm using CSS3 Keyframe and animations for it with a simple list
#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>
I want to set 5 elements instead of 3 but when I edit this code with 5 elements, it's not the same result..
Thanks for the help !

Answer 1

You have to change the time intervels that you have mentioned . Check the below code.
#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>