How to prevent a CSS keyframe animation from running on page load?

by

I always set preload class to body with animation time value 0 and its working pretty well. I have some back going transitions so I have to remove load animation to them too. I solved this by temporary setting animation time to 0. You can change transitions to match yours.

HTML

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

CSS is setting animation to 0s

body.preload *{
animation-duration: 0s !important;
-webkit-animation-duration: 0s !important;
transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;}

JS will remove class after some delay so animations can happen in normal time 🙂

setTimeout(function(){
    document.body.className="";
},500);

More Related Contents:

  1. Passing parameters to css animation
  2. Animate text for landing page
  3. Use CSS3 transitions with gradient backgrounds
  4. Maintaining the final state at end of a CSS3 animation
  5. Stopping a CSS3 Animation on last frame
  6. css3 transition animation on load?
  7. Changing Background Image with CSS3 Animations
  8. Play multiple CSS animations at the same time
  9. CSS3 animation not working in safari
  10. Can I position an element fixed relative to parent? [duplicate]
  11. CSS animation delay in repeating
  12. How can I transition width of content with width: auto?
  13. How to have css3 animation to loop forever
  14. CSS3 Spin Animation
  15. Webkit CSS Animation issue – persisting the end state of the animation? [duplicate]
  16. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  17. Why can’t I animate custom properties (aka CSS variables)?
  18. CSS: Animation vs. Transition
  19. Animating max-height with CSS transitions
  20. Maintaining the final state at end of a CSS animation
  21. Cross-Fade between images with CSS in loop
  22. How to add animated gradient to an svg path?
  23. Filling water animation
  24. Reuse CSS animation in reversed direction (by resetting the state?)
  25. Pure CSS animation visibility with delay
  26. CSS Animation property stays after animating
  27. Looping Animation of text color change using CSS3
  28. How can I delay the start of a CSS animation?
  29. Disable CSS animation on pseudo element inherited from parent
  30. Continuous CSS rotation animation on hover, animated back to 0deg on hover out

Leave a Comment