読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

Css3のアニメーションを一時停止するには

jQueryとかJavaScriptじゃなく、Css3のアニメーションって何かをきっかけに動かすとか止めるとかできるんかな?と思い。
結論としては、できるみたい。

JavaScript

(function(){
    $('.box').on('click', function(){
        var me = this;
        me.style.webkitAnimation = 'none';
        setTimeout(function() {
            me.style.webkitAnimation = '';
        }, 1000);
    });
})();

ここではboxクラスのついた要素をクリックすることで、動作を止めてます。
そして1秒後に再スタートさせたり。

止める

対象要素.style.webkitAnimation = 'none';

再度動かす

対象要素.style.webkitAnimation = '';

連続クオートで空文字を代入して、再起動。

注:webkitでしか試してませんが、おそらく対象要素.style.MozAnimationで同じことができるはず・・。