使用关键帧的 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