I'm attempting to create a simple animation using rotations and keyframes that triggers when the user hovers over an element.
The issue I'm facing is that once the user stops hovering over the element, the animation does not reverse. You can see the problem in action by visiting this live demo: http://jsfiddle.net/9eWhC/
Please note that the animation declaration has been included within the hover event itself.
.b:hover {
z-index:900;
-webkit-transform:rotateX(-180deg);
-moz-transform:rotateX(-180deg);
-webkit-animation-name: spinz;
-moz-animation-name: spinz;
-ms-animation-name: spinz;
-o-animation-name: spinz;
animation-name: spinz;
animation-direction: alternate;
-webkit-animation-direction: alternate;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-ms-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}