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

使用 CSS 制作 3D 轮播产品目录动画时，我也有同样的兴奋感 基于 :hover 的两个方向。

摆弄了一些明显的想法，比如动画填充模式：转发等 幸运的是，最终解决的方法是将两个过渡语法与一小段持续时间混合在一起，并将转换本身作为属性。在转换过程中追逐转换的状态，它的更新 被改造的元素保持原样，而且效果似乎符合规范，所以应该是一个有效的解决方案

transition-duration: 0.2s;transition-property:transform;

Answer 2

我在 Webkit 浏览器中也遇到过类似的 CSS 动画问题。在我的情况下，问题是我正在使用 css transform 属性，如下所示：

@keyframes float {
  0% { transform: translateY(0px); }

  50% { transform: translateY(20px); }

  100% { transform: translateY(0px); }
}

这会导致在使用 animation-play-state 属性暂停/播放动画时出现故障/跳跃。将 transform 替换为 top 修复了 webkit 浏览器中的跳转问题。

@keyframes float {
  0% { top: 0px; }

  50% { top: 20px; }

  100% { top: 0px; }
}

Answer 3

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