Grow your CSS skills. Land your dream job.

Transitions Only After Page Load

Published by Chris Coyier

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.

Comments

  1. James
    Permalink to comment#

    Nice :) and just 10+ lines of code. Thanks a lot. BTW, you might need an AJAX loader to indicate the fact that page is loading. You can get it from http://preloaders.net

  2. James
    Permalink to comment#

    Have you used this effect on the frog in the top right corner? :)

  3. Liam O'Brien
    Permalink to comment#

    The other option is if you’re using typekit, which who isn’t these days? Then you can use the prexisting classes the it applies to the body, such as wf-loading or wf-active and some CSS to show a loading spinner when the page isn’t fully rendered, so you’re killing two birds with the same stone, both preventing FOUT and preserving animations. Of you want some examples checkout Dan Edens site for some awesome examples of both animations and gorgeous typefaces, plus he’s the creator of the incredibly amazing animate.css

  4. Very nice, but please explain what your were developing there. (fiddle?)

  5. I do not know exactly whether to put the CSS in the bottom of the page is valid or not. But I think we can put transition at the end of the page so that at least the effect of the transition can be initiated when the page is quite ready:

    ...
    ...
    ...
    <style type='text/css'>
    .transition {
        -webkit-transition:all 0.26s ease-out;
        -moz-transition:all 0.26s ease-out;
        -ms-transition:all 0.26s ease-out;
        -o-transition:all 0.26s ease-out;
        transition:all 0.26s ease-out;
    }
    </style>
    </body>

    ????????????????????????????????????????

    • Schmotty
      Permalink to comment#

      You can’t put the style at the bottom, but you could put script that changes the style.

  6. cnwtx
    Permalink to comment#

    One note: Some browsers don’t understand none in the transition property. I’ve had to use transition:all 0s linear; (with prefixes) to make it go away completely.

  7. Hi Chris,

    I am using the same effect to fade in the content on my site on page load, however instead of removing a class from body, I just add it (“.loaded”). This way, I can trigger such effects on various elements on the page.

    So, by default, we have:

    
    
    .element{ 
             opacity:0;  
             transitions are defined here ....
    }
    
    

    And after page loads:

    
    
    .loaded .element{ 
                opacity:1; 
    }
    
    

    You can see the effect here: http://betterhtml.com

    I think there is no difference between our approaches, since the final outcome is the same.

    • Hi Chris and Andru,
      i see effect in your site, great.
      opacity with visibility is equal?

      
      .element {
              visibility:hidden;
               transitions are defined here ....
      }
      
      

      And after page loads :

      
      .loaded .element{
                  visibility:visible;
      }
      
    • Hi Farzin,

      Good question. You can’t use transitions on the visibility, as it can’t be animated. It has just the 2 states: visible or hidden. That’s why you need to use the opacity.

  8. Nice, I like that. I worked at a terribly over-thought solution for this in a project and it’s nice to see it can be handled much easier #bookmarked!

  9. Permalink to comment#

    Why don’t you do the opposite?

    Meaning, have all the transitions in a separate CSS selection:

    Body.loaded .element { transition-1: xyz;}

    Then add the loaded class when the Dom is ready.

  10. Nathan
    Permalink to comment#

    That is slick.

  11. Possibly stating the obvious but this means that if you haven’t got js enabled you don’t get any fancy transitions. Maybe it would be worth adding the class to the body in js?

  12. Permalink to comment#

    nice trick, thanks

  13. Yup, I noticed the effect of frog on the top, its really awesome.

  14. Glen
    Permalink to comment#

    There is a typo with the very first word of the article. I think you meant “If you’ve…” not “I’ve you’ve…”

  15. Permalink to comment#

    You should have added Narration too. I was confused initially about what is the issue.
    Thanks for sharing even I’m facing similar issue :)

  16. Dan
    Permalink to comment#

    Another example of why we should never have started titting around animating things with CSS. Of course, people with a following who are incapable or unwilling to learn the pre-existing tools for doing so have managed to “trend” enough momentum behind this silly movement now that it’s a probably too late to reverse.

  17. Chris, excellent post, I did notice the initial effect on the frog, clever, I am still excited about where CSS is headed, keep up the good work

  18. I’m pretty green to CSS, but I have to say that between your blog and Treehouse my knowledge has grown 10 fold in a mere month.

  19. You could so something like http://jsfiddle.net/PEEKt/

    You can pass in an additional (fourth) argument to delay your desired effect.

    The only thing I would say to be wary of is images. If your app/site has images then the two second delay may not be enough. The effect will still run while the image is being downloaded. Or even users on slower connections.

    So ‘could’ be worth using this after the load event is fired.

    Just another way of doing it.

  20. Nice. The Treehouse frog trick explained.

    Thanks!

  21. Hi
    Excellent article as usual, but even It’s the article I needed in just this moment.
    I have done a small css3 animation and It’s triggered before the complete page is loaded.

    I tried to add your jquery code, but I think I need a bit jquery for dummies (It’s the first time I add jquery code, sorry).
    I added the jquery to head and class ‘preload’ to body tag:

    ” (…)

    $(“window”).load(function() {
    $(“body”).removeClass(“preload”);
    });

    (…)”

    However the tag ‘preload’ is not removed.
    I think I have done wrong the way to link jquery library or the way of calling jquery function, but I dont’ see it now. Any help? Many thanks.

    • Sorry, the coded I quoted maybe It’s removed by spam.
      The jquery library I added is version 3.2.2 from googleaplis.

  22. Sorry for troubles, that’s I mean:
    “(…)

    
    
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.2'>
    
    <script type='text/javascript'>
    $("window").load(function() {
      $("body").removeClass("preload");
    });
    </script>
    </head>
    
    <body class="preload">
    

    • Hi Dave,

      One advice:

      Try placing your javascript files and scripts at the bottom of the page, just before the closing body tag instead of the head. When the page loads, your priority is to load the content and styles first and then the js.
      Unless you’re using some script like Modernizr that needs to be executed right away.

      As for your code, try removing the quotes on “window”:

      
      
      $(window).load(function() {
      $("body").removeClass("preload");
      });
      
      
    • Hi Andru
      Many thanks, I removed the quotes in ‘window’ and works now.
      Also, I will study placing js code before </body>

      Best regards,

    • You’re welcome Dave. Glad it works now!

  23. $(“window”).load(function() {
    $(“body”).removeClass(“preload”);
    });

    cool method,that I have used.

  24. Haha this is good, I noticed the effect of frog on the top, its really awesome.

  25. Hey Andru! The Treehouse frog trick is nicely explained.

    Thank you!

  26. Grant McCall
    Permalink to comment#

    Thanks for this solution, however if you use prefix free it no longer works :(

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".