Transitions Only After Page Load

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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.