CSS3 animation pause/unpause skipping & jumping in webkit

问题

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

回答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.

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

回答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;

来源：https://stackoverflow.com/questions/13880445/css3-animation-pause-unpause-skipping-jumping-in-webkit

标签

css3

webkit

css-animations