Fade in DOM elements hierarchically using CSS transitions and 385 bytes (minified) of JavaScript. Yes, bytes.
ease-in.min.js
to your JS directory, and link it in your document before the ending body
tag:
<script src="js/ease-in.min.js"></script>
{ opacity:0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; }
.visible { opacity:1; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; }
easeIn(document.body.children);
easeIn
will sequentially apply the .visible
class to each element in the collection you pass it, including all child elements if any are available.
easeIn(document.body.children, 200);