CSS3 animation pause/unpause skipping & jumping in webkit

Question

I have implemented animation pausing as described here: How to pause and resume CSS3 animation using JavaScript?

Here is my CSS for the rotating element:

.is-rotating{
    -webkit-animation: circle 55s linear infinite;
    -moz-animation: circle 55s linear infinite;
    -ms-animation: circle 55s linear infinite;
    animation: circle 55s linear infinite;
}

I toggle a is-paused class to the elements in question onmouseover:

.is-paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

When I remove this class with JS (onmouseout), the rotating animation resets to the 'origin' point. Sometimes it does, sometimes not. This happens in webkit (Chrome and Safari on OSX), works fine in FF.

I know animation-play-state is an experimental feature, but MDN says it should work fine in webkit. Does anyone have any ideas on how to implement for webkit browsers?

UPDATE: here is the rest of the CSS:

@-webkit-keyframes circle {
    from { -webkit-transform:rotate(0deg); }
    to { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes inner-circle {
    from { -webkit-transform:rotate(0deg); }
    to { -webkit-transform:rotate(-360deg); }
}

@-moz-keyframes circle {
    from { -moz-transform:rotate(0deg); }
    to { -moz-transform:rotate(360deg); }
}
@-moz-keyframes inner-circle {
    from { -moz-transform:rotate(0deg); }
    to { -moz-transform:rotate(-360deg); }
}

@-ms-keyframes circle {
    from { -ms-transform:rotate(0deg); }
    to { -ms-transform:rotate(360deg); }
}
@-ms-keyframes inner-circle {
    from { -ms-transform:rotate(0deg); }
    to { -ms-transform:rotate(-360deg); }
}

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

score 1 · Answer 1 · answered Dec 14 '12 at 15:17

1

Have you tried animation-fill-mode: forwards? That specifies that at the end of the animation, it should maintain its final styles instead of reverting to its pre-animation state.

answered Dec 14 '12 at 15:17

RachelNabors

86
6

2

No dice - this property doesn't solve the issue, no change in behavior. I tried `backwards` and `forwards` and `both` - still nothing. Thank you – Benjamin Smith Dec 14 '12 at 18:52

score 1 · Answer 2 · answered Apr 10 '13 at 15:11

I've experienced similar issues with a CSS animation in Webkit browsers as well. The issue, in my situation, was that I was using the css transform property, like so:

@keyframes float {
  0% { transform: translateY(0px); }

  50% { transform: translateY(20px); }

  100% { transform: translateY(0px); }
}

This caused glitching/jumping when pausing/playing the animation with the animation-play-state property. Replacing transform with top fixed this jumping issue in webkit browsers.

@keyframes float {
  0% { top: 0px; }

  50% { top: 20px; }

  100% { top: 0px; }
}

I am using `transform:rotate()` rather than `translateY`; is it possible to adapt your answer to my situation? — Benjamin Smith, May 03 '13 at 15:42

user784509 · Answer 3 · 2013-09-25T18:59:17.730

I had the same flavor of jumpiness using CSS to animate a 3D carousel product catalog In two directions based on :hover.

Having fiddled with obvious ideas like animation-fill-mode:forwards and such with not the least good fortunes what finally solved it was to mix in two bits of transition syntax with a tiny duration and the transform itself as the property. In the course of transition chasing to catch transform's state ,it's updates To the element being transformed remained intact , and the effect seems to fit the specs , so it should be a valid solution

transition-duration: 0.2s;transition-property:transform;

CSS3 animation pause/unpause skipping & jumping in webkit

3 Answers3

Linked