How to pause a css animation, and then continue running from the pause point?

Question

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.

Fly_pig · Accepted Answer · 2013-06-19 09:04:15Z

1

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

Just switch animation-play-state css property to be paused, according to the article you supplied(http://css-tricks.com/restart-css-animation/

answered Jun 19, 2013 at 9:04

Fly_pig

1658 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christofer Vilander · Accepted Answer · 2013-06-19 09:28:46Z

1

I've just started to dig into JS myself, so there are surely better ways to do this, but how about something like this - Demo (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";
        }

    };
})();

Based on if the animation is running or paused I change the animation-play-state onclick.

EDIT: Added the css code.

edited Jun 19, 2013 at 9:28

answered Jun 19, 2013 at 8:56

Christofer Vilander

18.2k6 gold badges33 silver badges27 bronze badges

1 Comment

Christofer Vilander Over a year ago

Had a quick look, and can't really explain the "jumping", but I'll look into it and see if I can come up with a solution.

Collectives™ on Stack Overflow

How to pause a css animation, and then continue running from the pause point?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related