Prevent Transitions as a Page is Loading Chris Coyier

August 2024 · 1 minute read

April 5, 2023

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", () => { document.body.classList.remove("preload"); });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.

🤘

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgaXxxgY6pqZ6ulaPBbsDRmqWsoaSevK%2B%2FjJqqZpldpa6osYyiqmakn5axqrrGaA%3D%3D