javascriptを使用してフリーズするCSSアニメーション

Question

アニメーションを停止すると、開始状態（0度）にリセットされ、現在の回転点でアニメーションを一時停止する方法は？停止と開始は正常に動作します。

function animFeeze(){ 
    //// what goes here? 
} 
function animStart(){ 
    // @-webkit-keyframes spinY { 
    // from { transform: rotateY(0); } 
    // to { transform: rotateY(360deg); } 
    document.getElementById("anim").style.WebkitAnimationName = "spinY"; 
} 
function animStop(){ 
    // @-webkit-keyframes noAnim {} 
    // @keyframes noAnim {} 
    document.getElementById("anim").style.WebkitAnimationName = "noAnim"; 
} 
function init() { 

    animatePause.addEventListener("click", animFreeze, false); 
    animateStart.addEventListener("click", animStart, false); 
    animateStop.addEventListener("click", animStop, false); 
    console.log("DOM fully loaded and parsed"); 
} 
window.addEventListener("DOMContentLoaded", init, false); 

Answer 1

使用

document.getElementById("anim").style.animationPlayState="paused"; 

再開するために "実行中" に設定します。

Example JSFiddle

Answer 2

はここにありがとう

function animPauseToggle(){ 
    var e = document.getElementById("anim"); 
    if(e.style.webkitAnimationPlayState == "paused") 
     e.style.webkitAnimationPlayState = "running"; 
    else 
     e.style.webkitAnimationPlayState = "paused"; 
}