javascript - 使用JavaScript卡住CSS动画

当我停止动画时，它将重置为开始状态（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);

最佳答案

采用

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

将其设置为“正在运行”以继续。

Example JSFiddle

关于javascript - 使用JavaScript卡住CSS动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42957307/