31

私は次のHTMLを持っています：

<div class="rotate"></div>​

そして次のCSS：

@-webkit-keyframes rotate {
  to { 
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}​

アニメーションを停止する方法（JavaScriptを使用）があるかどうかを知りたいのですが、現在の反復を終了させます（できれば、1つまたはいくつかのCSSプロパティを変更します）。空白の値に設定しようとし-webkit-animation-nameましたが、それにより要素が不快な方法で元の位置にジャンプして戻ります。私も設定-webkit-animation-iteration-countしてみまし1たが、同じことをします。

4

2 に答える 2

36

animationiterationイベントを受信したら、アニメーションを停止します。このようなもの（jQueryを使用）：

CSS

@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}
.rotate {
    width: 100px;
    height: 100px;
    background: red;
}
.rotate.anim {
    -webkit-animation-name:             rotate;
    -webkit-animation-duration:         5s;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;
}

HTML

<div class="rotate anim">TEST</div>
<input id="stop" type="submit" value="stop it" />

JS（JQuery）

$("#stop").click(function() {
    $(".rotate").one('animationiteration webkitAnimationIteration', function() {
        $(this).removeClass("anim");
    });
});

フィドル： http： //jsfiddle.net/sSYYE/1/

ハンドラーが1回だけ実行されるように、.oneここでは（ではなく）使用していることに注意してください。.onそうすれば、アニメーションを後で再開できます。

于 2012-10-25T04:27:13.160 に答える
1

元の位置に戻らずに、アニメーションが終了したときにアニメーションを停止させたいということですか？

次に、必要なもの：

ある場所から別の場所に移動する何かをアニメーション化し、そこにとどまらせます。animation-fill-mode：forwards;

このリンクを確認してください：

http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

于 2014-03-03T09:03:38.200 に答える