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>Playlist</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 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;
    
        -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: lightgreen;
    
    -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% {
       ...