Prevent Transitions as a Page is Loading

I ran into this problem 11 years ago and blogged it.

The problem is preserved in this video that shows a hilariously early version of CodePen and how some CSS transitions are firing early and causing the page load to look weird.

That old blog post used jQuery and old CSS prefixes, and someone just emailed me about it, so this is the lineup I’d use today if I had that problem:

<body class="preload">Code language: HTML, XML (xml)
window.addEventListener("load", () => {
});Code language: JavaScript (javascript)
.preload * { 
  transition: none !important;
  animation-duration: 0.001s !important; 
}Code language: CSS (css)

The transitions and animations will work fine after the page is fully loaded and the initial preload class is removed.



I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

3 responses to “Prevent Transitions as a Page is Loading”

  1. Hi Chris!

    Just FYI — I noticed that my feed reader displayed the code blocks with language names inlined:

    Code language: HTML, XML (xml)

    So maybe there’s something wonky in the RSS conversion?


  2. Aleksi says:

    Is this generally a bad idea? Not showing stuff before page is loaded? I’d like to do it, but it makes page feel slower…

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️