アニメーションの一時停止（transition）

http://jsdo.it/ksk1015/xm7R http://css-tricks.com/controlling-css-animations-transitions-javascript/

by FiNGAHOLiC

HTML

<button id="js-btn-play">play</button>
<button id="js-btn-pause">pause</button>
<button id="js-btn-reverse">reverse</button>

<div id="js-box"></div>

CSS

#js-box {
    width: 100px;
    height: 100px;
    background: yellow;
    -webkit-transition: all 10s linear;
}

#js-box.anim {
    -webkit-transform: translate3d(100px, 0, 0) !important;
    background: red;
}

JavaScript

$(function(){

    var $btnPlay = $('#js-btn-play');
    var $btnPause = $('#js-btn-pause');
    var $btnReverse = $('#js-btn-reverse');
    var $box = $('#js-box');
    
    $btnPlay.on('click', function(){
        $box.addClass('anim');
    });
    
    $btnPause.on('click', function(){
        var computedStyle = $box.css('-webkit-transform');
        $box.removeClass('anim');
        $box.css('-webkit-transform', computedStyle);
    });
    
    $btnReverse.on('click', function(){
        $box.removeClass('anim');
    });
    
});