CSS3 sequential image fade IN

CSS3 sequential image fade IN

HTML

<div id="fds">
<img src="http://www.coothead.co.uk/images/face-2.jpg" alt="name">
<img src="http://www.coothead.co.uk/images/face-2.jpg" alt="name">
    <img src="http://www.coothead.co.uk/images/face-2.jpg" alt="name">
        <img src="http://www.coothead.co.uk/images/face-2.jpg" alt="name">
            <img src="http://www.coothead.co.uk/images/face-2.jpg" alt="name">
</div>

CSS

#fds { font-size: 0; }
#fds img { width: 33.33%; opacity: 0; }

@keyframes fdsseq { 100% { opacity: 1; } }
#fds img { animation: fdsseq .5s forwards; }
#fds img:nth-child(1) { animation-delay: .5s; }
#fds img:nth-child(2) { animation-delay: 1s; }
#fds img:nth-child(3) { animation-delay: 1.5s; }

JavaScript

$(function(){$('div#fds img').each(function(i){$(this).delay((i++)*500).fadeTo(1000,1);})});