如何暫停css動畫，然后從暫停點繼續運行？

Question

我正在玩一個無限迭代的CSS動畫，直到某些時候我將它從java腳本中暫停（使用此處的技術）。

稍后我恢復動畫。 問題是動畫從開始點重新開始，而不是從暫停前的最后一點開始。

有沒有辦法從暫停點繼續動畫，而不是跳到開始？

編輯：在暫停和恢復之間我也改變了animation duration ，請參閱演示 。 你應該看到一些'跳躍'。 需要解釋這種奇怪的行為。

Answer 1

我剛剛開始自己​​深入研究JS，所以肯定有更好的方法可以做到這一點，但是這樣的事情怎么樣 - 演示 （Unprefixed version）。

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