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

2012/04/15 16:24:30

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で同じことができるはず・・。