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

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/