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

http://stackoverflow.com/questions/2017851/webkit-translatex-animation-is-rolling-back-to-initial-position http://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript

by FiNGAHOLiC

HTML

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

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

CSS

#js-box {
    width: 100px;
    height: 100px;
    background: yellow;
}

#js-box.anim {
    -webkit-animation: move 2s 1 ease-in;
    -webkit-animation-fill-mode: forwards;
    /*
    for f**in Android
    http://blog.webcreativepark.net/2012/02/12-141313.html
    */
    -webkit-transform: translate3d(400px, 0, 0);
}

#js-box.pause {
    -webkit-animation-play-state: paused;
}

@-webkit-keyframes move {
    0%   { -webkit-transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(400px, 0, 0); }
}

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.removeClass('pause').addClass('anim');
    });
    
    $btnPause.on('click', function(){
        $box.addClass('pause');
    });
    
});