悬停后如何在鼠标移出时反转动画

Question

因此，有可能在鼠标移开时出现反向动画，例如：.class{   transform: rotate(0deg);}.class:hover{   transform: rotate(360deg);}但是，当使用@keyframes动画时，我无法使其工作，例如：.class{   animation-name: out;   animation-duration:2s;}.class:hover{   animation-name: in;   animation-duration:5s;   animation-iteration-count:infinite;}@keyframe in{    to {transform: rotate(360deg);}}@keyframe out{    to {transform: rotate(0deg);}}知道我需要迭代和动画本身，什么是最佳解决方案？http://jsfiddle.net/khalednabil/eWzBm/