css - 使用关键帧的 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-directionof reverse。

修改过的小提琴