CSS3 sequential image fade IN

CSS3 sequential image fade IN

HTML

<div id="fds">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/16/23/alphabet-150820__180.png" width="110" height="110">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/16/23/alphabet-150823__180.png" width="110" height="110">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/16/23/alphabet-150815__180.png" width="110" height="110">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/16/23/alphabet-150823__180.png" width="110" height="110">
</div>

CSS

#fds { font-size: 0; }
#fds img { 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);})});