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

【问题标题】：How to pause a css animation, and then continue running from the pause point?如何暂停一个css动画，然后从暂停点继续运行？
【发布时间】：2013-06-19 08:02:01
【问题描述】：

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

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

有没有办法从暂停点继续动画，而不跳到起点？

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

【问题讨论】：

标签： javascript css animation css-animations

【解决方案1】：

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

只需将animation-play-state css 属性切换为paused，根据您提供的文章（http://css-tricks.com/restart-css-animation/

【讨论】：

【解决方案2】：

我自己刚刚开始深入研究 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 代码。

【讨论】：

看了一下，并不能真正解释“跳跃”，但我会研究一下，看看我是否能想出一个解决方案。