CSS3 animation pause/unpause skipping & jumping in webkit - css

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

Answer 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.

Answer 2

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

Answer 3

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;