5

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); }
}

3 Answers 3

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.

1
  • 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 Dec 14, 2012 at 18:52
1

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; }
}
1
  • I am using transform:rotate() rather than translateY; is it possible to adapt your answer to my situation? May 3, 2013 at 15:42
1

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.