How to prevent css keyframe animation to run on page load?

css animation keyframe
Eduárdó picture Eduárdó · Jan 14, 2015 · Viewed 38.8k times · Source

I have a div in which I animate the content:

On hover content slides into the container div. My problem is, when I refresh the page, and the page loads the #content's animDown animation will run, and I'd prefer it to run only after a hover event.

Is there a way to do this pure CSS, or I have to figure something out in JS?

http://jsfiddle.net/d0yhve8y/

Answer

Tominator picture Tominator · Jul 10, 2016

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);

Related questions

How to have css3 animation to loop forever

I want to have the whole set of animation to play forever. When the last photo fades off, I want the first one to appear again an so on. What I did (and I dont like) is set the page …

Read More
CSS-moving text from left to right

I want to create an animated HTML "marquee" that scrolls back and forth on a website: <div class="marquee">This is a marquee!</div> and the CSS: .marquee { position: absolute; white-space: nowrap; -webkit-animation: rightThenLeft 4s linear; } @…

Read More
How do I change a background position with css3 animation?

Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover I can't seem to use keyframes properly, it never works and I have …

Read More