CSS3动画暂停/取消暂停跳过&跳跃在webkit [英] CSS3 animation pause/unpause skipping & jumping in webkit

问题描述

我已执行动画暂停，如下所示：
如何使用JavaScript暂停和恢复CSS3动画？

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

这是旋转元素的CSS：

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

我切换a is- paused class to the elements in question onmouseover ：

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

当我用JS（onmouseout）删除这个类时，旋转动画重置为原点。有时它会，有时不是。这发生在webkit（Chrome和OSX上的Safari），在FF中工作得很好。

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.

我知道动画播放状态是实验性功能，但 MDN说它应该可以正常工作webkit 。

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：这里是CSS的其余部分：

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

推荐答案

使用CSS来动画制作3D旋转木马产品目录
在两个方向基于：hover。

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动画暂停/取消暂停跳过&跳跃在webkit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！