Transitions Only After Page Load

Avatar of Chris Coyier
Chris Coyier on (Updated on )

If 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 to be able to prevent or trigger animations/transitions on page load without JavaScript, but alas.