CODEWITHSUNDEEP
cssanimationwebkit
niksy
niksy

Reputation: 625

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/

Upvotes: 2

Views: 1739

Answers (2)

Sebastian Patane Masuelli
Sebastian Patane Masuelli

Reputation: 4247

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/

Upvotes: 3

Lex
Lex

Reputation: 1378

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

Upvotes: 1

Related Questions