Transitions Only After Page Load

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

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.