CSS3动画暂停/取消暂停在webkit中跳过和跳跃

Question

我已经实现了动画暂停，如下所述: How to pause and resume CSS3 animation using JavaScript?

这是我的旋转元素的 CSS:

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

我将 is-paused 类切换到有问题的元素 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(OSX 上的 Chrome 和 Safari)中，在 FF 中工作正常。

我知道 animation-play-state 是一项实验性功能，但是 MDN says it should work fine in webkit .有没有人对如何为 webkit 浏览器实现有任何想法？

更新:这是 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

你试过animation-fill-mode: forwards了吗？这指定在动画结束时，它应该保持其最终样式，而不是恢复到动画前的状态。