0

I'm exploring CSS animations. I've been developing in codepen and moving code manually to my server when I'm happy with the result. Several elements on the page use the transition property in order to animate.

On codepen, my code behaves as I expect, but when I move it to my server, all of the transitions are triggered as the page loads: my nav elements drop down from the top of the screen, my banner expands to fill its space, etc. If I view the same files locally, the animation on page load doesn't happen.

Why am I getting this behavior, and how can I stop it?

Woodrow Barlow
  • 8,477
  • 3
  • 48
  • 86
  • this is not a duplicate. the question http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load is asking how to animate on page load, while i am asking to *stop* animation on page load. – Woodrow Barlow Sep 10 '14 at 11:23

1 Answers1

0

Add class="pageload" to your body tag (or any class name, that's just one I use for the example )

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

and remove that class after the page has loaded

$("window").load(function() {
    $("body").removeClass("pageload");
});
davidcondrey
  • 34,416
  • 17
  • 114
  • 136