Blog – Hans van Goor

by: Chris Coyier

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.

body class="preload"

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

Article source: http://network.smashingmagazine.com/2012/04/27/transitions-only-after-page-load/