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

Answer 1

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.