CSS animation: pausing

Question

I have a simple CSS3 animation which I would like to pause on hover.

Here is a simplified version:

h1 {
    animation-name: test 3000ms infinite alternate;
}
@keyframes test {
    from {
        transform: translate(0,0);
    }
    to {
        transform: translate(100px,0);
    }
}
h1:hover {
    animation: paused;
}

It works, but pausing means jumping back to the 0% state. Is there a way to either (a) pause in the current state of (b) resetting more gracefully, such as running through one final loop?

Thanks

Possible duplicate of [How to pause and resume CSS3 animation using JavaScript?](http://stackoverflow.com/questions/5804444/how-to-pause-and-resume-css3-animation-using-javascript) — mattdevio, Dec 22 '15 at 03:44
@magreenberg Completely unrelated. (a) it’s not asking how to pause it, which is already happening and (b) I certainly don’t need a JavaScript solution which is easy, but unhelpful. I’m looking for how _not_ to suddenly reset the state when pausing. — Manngo, Dec 22 '15 at 03:49

score 3 · Accepted Answer · answered Dec 22 '15 at 03:46

3

Use animation-play-state as below:

h1 {
    animation-name: test;
    animation-duration:3000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state:running;/*running normally*/
}

h1:hover {
    animation-play-state:paused; /*paused when hover*/
}

DEMO

Note - The animation-play-state property is not supported in Internet Explorer 9 and earlier versions.

answered Dec 22 '15 at 03:46

Guruprasad J Rao

29,410
14
101
200

1

That’s it. I didn’t even notice that one. That will be very useful. Note: neither animation nor transition work in _Internet Exploiter 9_, so nothing lost there … Thanks – Manngo Dec 22 '15 at 03:54
Cool.. Happy Coding.. :) – Guruprasad J Rao Dec 22 '15 at 03:56

CSS animation: pausing

1 Answers1