CSS3动画在Webkit中如何暂停/继续跳过和跳转

Question

我已经按照这里描述的实现了动画暂停功能: 如何使用JavaScript暂停和恢复CSS3动画？ 这是旋转元素的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;
}

当我使用 onmouseover 时，我会为相关元素切换一个 is-paused 类：

.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），在Firefox中可以正常工作。

我知道 animation-play-state 是一个实验性的特性，但是MDN表示它应该在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); }
}

- Benjamin Smith

Answer 1

我使用CSS来制作一个基于:hover的3D旋转式产品目录，但是出现了跳动的问题。

尝试了很多明显的想法，如animation-fill-mode:forwards等，但都没有成功。最后解决问题的方法是混合两个transition语法，设置非常短的持续时间，并将transform自身作为属性。在过渡追踪中捕捉transform的状态，更新被转换的元素仍然保持不变，效果似乎符合规范，因此应该是一种有效的解决方案。

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

- user784509

Answer 2

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

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

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

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

这导致使用animation-play-state属性暂停/播放动画时出现故障/跳跃。在Webkit浏览器中，用top替换transform可以解决此跳跃问题。

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

  50% { top: 20px; }

  100% { top: 0px; }
}

- pruett

---

我正在使用 transform:rotate() 而不是 translateY；你的答案能否适应我的情况？ - Benjamin Smith

Answer 3

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

- RachelNabors

---

不行 - 这个属性不能解决问题，行为没有变化。我尝试了 backwards，forwards 和 both - 仍然没有。谢谢。 - Benjamin Smith