How to Solve Unwanted CSS Transitions on Page Load


There is a case where you need to add transitions to your page. Maybe you put it on some pages or even all pages. Then you noticed there is an unwanted transitions on page load.

Transitions Enabled Only After Page Load

We can fix that. The idea is to disable transitions in our page first then enable it after the page loaded.

First we can create a CSS class that disable transitions:

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

Then put it on body element:

<body id="body" class="no-transition">

When the page loads, remove it:

function transitionAfterPageLoad() {

// call the function inside an Immediately Invoked Function Expression (IIFE) to invoke it immediately after page load
(function() {

// jQuery 
$(function() {

That’s it, easier than we think.


To fix unwanted CSS Transitions on page load we can disable transitions to our page first then re-enable it after the page loaded.

Have another tip or even a better one about this issue? Please let us know in the comments section below 👇. Share this if you think this is helpful. Thank you.

Fajarwz's photo Fajar Windhu Zulfikar

I'm a full-stack web developer who loves to share my software engineering journey and build software solutions to help businesses succeed.

Email me
  • Full-Stack Laravel: Forum Web App (Complete Guide 2024)
  • Join Coderfren Discord Server: Share knowledge, build projects & level up your skills.





Sign up for my email newsletter and never miss a beat in the world of web development. Stay up-to-date on the latest trends, techniques, and tools. Don't miss out on valuable insights. Subscribe now!


comments powered by Disqus