0

次のような div で -webkit-animation を使用しています。

#agFloor {
    background-image: url('http://blabla/something.jpg');
    width: 375px;
    height: 364px;
    top:0;
    left:20px;
    -webkit-animation: FloorAnim 5s ease-in-out; 
}

キーフレームで;

@-webkit-keyframes FloorAnim {
    0% { -webkit-transform: translateY(100%); }
    40% { -webkit-transform: translateY(-60%); }
    80% { -webkit-transform: translateY(-60%); }
    100% { -webkit-transform: translateY(0%); }
}

私の質問は、私が理解している限り、これは1回限りのアニメーションである必要があるということですが、jQueryを使用してdivをfadeOut/hideおよびfadeIn/showすると、毎回ルールが追加されるため、divが表示されるたびにアニメーションが実行されますまたはフェードイン。

これは WAD ですか、それとも何らかのバグですか?、この動作を回避する方法はありますか?

アニメーションを一度だけにしてから、毎回アニメーションをトリガーせずに div で再生したいと思います。

わかりました。

4

1 に答える 1

1

非表示にするときは、viaに設定-webkit-animationしますnone.css

$(this).css("-webkit-animation", "none");

http://jsfiddle.net/BHF8m/

于 2013-05-21T14:19:22.723 に答える