使用 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";

将其设置为 "running" 以恢复。

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";
}