WebKit animation on start

I've set WebKit keyframes on :hover and element is transforming as it should. Reversed effect should be activated when user removes his mouse cursor from element (basically onmouseover and onmouseout in JS).

So I've created reverse keyframes and put them in default CSS selector. Problem is that these keyframes activate on page load, but I need them to be activated only if you move mouse from the element.

Is there some other property that needs开发者_如何学运维 to be set or is this achieveable only with JS?

EDIT: Here is JSFiddle test case (view in WebKit, ofcourse): http://jsfiddle.net/nkEwQ/

---

without JS: removed -webkit-animation-name:bouncedown; from #button,
replaced it with -webkit-transition: all .5s ease-in-out;
(can't get the nice bounce effect, but it animates back to the square) http://jsfiddle.net/SebastianPataneMasuelli/nkEwQ/7/

With JS i removed the animation from #button, created a class that handles the webkit animation (.active), and added that class on button mouseover using jQuery.

This way, the #button has no animation on load, but the animation declarations are added to it when the user mouses over it.

see it here: http://jsfiddle.net/SebastianPataneMasuelli/nkEwQ/5/

---

JS only. Cause there are no other pseudo-classes except :active, :focus, :first-child, :hover, :lang, :link, :visited.