Question

我正在玩一个无限次迭代的CSS动画，直到某些时候我将它从java脚本中暂停（使用来自here的技术）。

稍后我恢复动画。问题是动画从开始点重新开始，而不是从暂停前的最后一点开始。

是否有办法从暂停点继续播放动画，而不是跳到开头？

编辑：在暂停和恢复之间，我也更改了animation duration，请参阅demo。你应该看到一些'跳跃'。需要解释这种奇怪的行为。

Answer 1

我自己刚刚开始深入研究JS，所以肯定有更好的方法可以做到这一点，但是这样的事情怎么样 - Demo（未加前缀的版本）。

CSS

#box {
    position: relative;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background: #393939;
    animation: move 2s linear infinite;
    animation-play-state: running;
}

@keyframes move {
    100% {
        transform: rotate(360deg);
    }
}

JS：

(function () {

    var box = document.getElementById('box');

    box.onclick = function () {

        if (box.style.animationPlayState === "paused") {
            box.style.animationPlayState = "running";

        } else {
            box.style.animationPlayState = "paused";
        }

    };
})();

根据动画是否正在运行或暂停，我更改了animation-play-state onclick。

编辑：添加了css代码。

Answer 2

http://jsfiddle.net/zhang6464/MSqMQ/

根据您提供的文章（http://css-tricks.com/restart-css-animation/

，只需将animation-play-state css属性切换为paused即可

如何暂停css动画，然后从暂停点继续运行？

2 个答案: