使用关键帧的CSS3动画不交替拍摄

Question

我想使用旋转和关键帧实现一个死的简单动画，当用户悬停一个元素时会触发动画。

的问题是，当用户停止徘徊在动画不向后发射 我的问题http://jsfiddle.net/9eWhC/

Κeep记住，动画声明已添加到悬停事件的现场演示的元素

.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; 
} 

Answer 1

alternate不能帮助你在这里 - 你需要播放动画至少两次在相同状态下，无论是正常的（.b）或悬停（.b:hover）要注意的alternate的影响。为了在悬停时设置相同的动画反转，您需要执行的操作是在正常状态（.b）上设置相同的动画，但animation-direction的值为reverse。

modified fiddle