Animate elements sequentially using CSS3 and jQuery

http://stackoverflow.com/questions/6399850/animate-elements-sequentially-using-css3-and-jquery

by dwick

HTML

<script src="http://www.modernizr.com/downloads/modernizr-2.0.4.js"></script>
<div id="element3">a</div>
<div id="element2">b</div>
<div id="element1">c</div>

CSS

@-webkit-keyframes 'fadein' {
    from { opacity: 0; }
    to { opacity: 1; }
}
div { display:none; }
.cssanimations div { opacity: 0; display:block; }
.cssanimations #element1,
.cssanimations #element2,
.cssanimations #element3 {
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: 'fadein';
}
.cssanimations #element2 {
    -webkit-animation-delay: 1s;
}
.cssanimations #element1 {
    -webkit-animation-delay: 2s;
}

JavaScript

$(document).ready(function() {
    if (!Modernizr.cssanimations) {
        $("#element3").fadeIn(1000, function() {
            $("#element2").fadeIn(1000, function() {
                $("#element1").fadeIn(1000);
            });
        });
    }
});