CSS3 Looped Animations

Example of pure CSS looped animation. Read more: http://filmic.eu/blog/css3-looped-animations/ Author: Filip Michalowski http://filmic.eu

HTML

<!-- The markup of the animated elements -->

<div id="animation">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

CSS

#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 8s ease-in-out -4s infinite alternate; /* delay = -duration * 66%. Note the negative delay to skip the "keyframes delay" */
    -moz-animation: fadein 8s ease-in-out -4s infinite alternate;
    animation: fadein 8s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) { /* Second element of the list */
    background-color: yellow;
    
    -webkit-animation: fadein 8s ease-in-out 0s infinite alternate; 
    -moz-animation: fadein 8s ease-in-out 0s infinite alternate;
    animation: fadein 8s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) { /* Third element of the list */
    background-color: lightblue;
    
    -webkit-animation: fadein 8s ease-in-out 4s infinite alternate; /* delay = duration * 66% */
    -moz-animation: fadein 8s ease-in-out 4s infinite alternate;
    animation: fadein 8s ease-in-out 4s infinite alternate;
}
#animation li:nth-of-type(4) { /* First element of the list */
    background-color: red;
    
    -webkit-animation: fadein 8s ease-in-out 6s infinite alternate; 
    -moz-animation: fadein 8s ease-in-out 6s infinite alternate;
    animation: fadein 8s ease-in-out 6s infinite alternate;
}
#animation li:nth-of-type(5) { /* First element of the list */
    background-color: blue;
    
    -webkit-animation: fadein 8s ease-in-out 8s infinite alternate;
    
    -moz-animation: fadein 8s ease-in-out 8s infinite alternate;
    animation: fadein 8s ease-in-out 8s infinite alternate;
}
/* Defines the animation keyframes */
@-webkit-keyframes fadein {
    0% {           /* "Delay" of the animation - 66% of the...