Figer l'animation CSS en utilisant javascript

Question

Lorsque j'arrête mon animation, elle revient à l'état initial (0 degré zéro). Comment l'arrêter dans son point de rotation actuel? Arrêtez et commencez à bien travailler.

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

Utilisez

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

Set à "courir" pour reprendre.

Example JSFiddle

Answer 2

Merci est ici une fonction de bascule de pause qui a travaillé

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