4

I'm playing a CSS animation with infinite iterations, until some point I pausing it from java script (using technique from here).

At later time I resume the animation. The problem is that the animation is restarting from the beginning point, and not from the last point before the pause.

Does there is a way to continue the animation from the pause point, without jumping to the start?

Edit: Between the pause and resume I also change the animation duration, see the demo. You should see some 'jumping'. Need explanation about this strange behavior.

4

2 回答 2

1

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

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

于 2013-06-19T09:04:15.037 回答
1

我自己刚刚开始深入研究 JS，所以肯定有更好的方法可以做到这一点，但是像这样的东西怎么样 -演示（无前缀版本）。

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-stateonclick。

编辑：添加了 css 代码。

于 2013-06-19T08:56:37.290 回答