1

回転とキーフレームを使用して、完全に単純なアニメーションを実現しようとしています。ユーザーが要素をホバーすると、アニメーションが起動します。

問題は、ユーザーが要素のホバーを停止したときに、アニメーションが逆方向に起動されないことです。私の問題のライブデモ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;
}
4

1 に答える 1

2

alternateここでは役に立ちません。の効果を確認するには、通常 ( ) またはホバー ( )の同じ状態でアニメーションを少なくとも 2 回再生する必要があります。ホバリングをオフにしたときに同じアニメーションを逆にするために必要なことは、通常の状態でも同じアニメーションを設定することです( ) 。.b.b:hoveralternate.banimation-directionreverse

修正されたフィドル

于 2013-03-13T16:56:36.407 に答える