I've you've ever used CSS transitions on structural elements on your page, you may have noticed a case where you see that transition happen when the page loads and is laying itself out.

Quick video of the issue I was having:



To fix it, I just added a class of "preload" to the body element.

Then ensure no transitions would happen:

.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; } Then removed that class on page load:

$("window").load(function() { $("body").removeClass("preload"); }); Worked pretty well. It would be nice to be able to prevent or trigger animations/transitions on page load without JavaScript, but alas.

Transitions Only After Page Load is a post from CSS-Tricks



More...