Prevent CSS transitions from firing on page load with JavaScript

CSS animations will sometimes trigger during page load as the layout is rendering.

This can be prevented by adding a class to the body that sets all of the body’s child elements to have transition: none; set. The class will then be removed from the body element after page load is complete, allowing the user to still trigger CSS animations as expected.

Credit: CSS-Tricks.com

JavaScript

// **************************************************
//  Prevent CSS transitions from firing on page load
// **************************************************
window.onload = (event) => {
    document.querySelector('body').classList.remove('preload');
};

HTML

<body class="preload">
    ...
</body>

CSS

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}