使用关键帧的 CSS3 动画交替不触发

Question

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

问题是当用户停止悬停元素时，动画不会向后触发 我的问题的现场演示http://jsfiddle.net/9eWhC/

请记住，动画声明已添加到悬停事件中

.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