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）或悬停（{{1} }）注意.b:hover的效果。为了在悬停时具有相同的动画反转，您需要做的是在正常状态（alternate）上设置相同的动画，但.b为animation-direction。

modified fiddle

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

1 个答案: