How to prevent CSS animation on page load?

Question

I have an animation, which is taking care of the fading in and out transition on button hover state.

The problem is that the default animation (-webkit-animation: off-state 1s;) is firing off on page load. How do I make it active only after first hover state?

I know how to achieve this using CSS transitions. I am looking for a solution using animation/keyframes.

HTML

<div class="button"></div>

CSS

.button { background: #000; width: 20px; height: 20px; -webkit-animation: off-state 1s; }
.button:hover { -webkit-animation: on-state 1s; }

@-webkit-keyframes on-state {
  0% { height: 20px; }
  100% { height: 100px; }
}

@-webkit-keyframes off-state {
  0% { height: 100px; }
  100% { height: 20px; }
}

Demo

No, unless you simply mean [like this](http://jsbin.com/ItUZoRU/3/edit). There currently is no way to add a class with pure CSS — Zach Saucier, Oct 23 '13 at 17:31
@Zeaklous That's using transitions, which are unfortunately not as flexible as animation. — Gajus, Oct 23 '13 at 17:35
Agreed, I realize that completely. Like I said above there is no way to add a class with pure CSS. I'm still not clear as to what your end goal here is, could you provide a working js version? — Zach Saucier, Oct 23 '13 at 17:38

score 2 · Answer 1 · answered Oct 23 '13 at 17:12

As suggested by @Zeaklous, this can be done using JavaScript, e.g. using jQuery:

$('.button').one('mouseout', function () { $(this).addClass('alt-animation'); });

and moving the animation rule to .alt-animation class:

.button { background: #000; width: 20px; height: 20px; }
.button.alt-animation { -webkit-animation: off-state 1s; }
.button:hover { -webkit-animation: on-state 1s; }

Ideally, there should be CSS only alternative.

How to prevent CSS animation on page load?

1 Answers1

Linked