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）删除此类时，旋转动画将重置为“origin”点。有时它会，有时不会。这种情况发生在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吗？这指定在动画结束时，它应该保持其最终样式，而不是恢复到其动画前状态。

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

我使用CSS制作3D旋转木马产品目录的动画具有相同的跳跃性基于两个方向：悬停。

摆弄了明显的想法，比如动画填充模式：前锋等等最重要的是，最终解决它的是将两位过渡语法混合在一起，持续时间很短，变换本身就是属性。在过渡追逐变换状态的过程中，它是更新对于被转换的元素保持不变，效果似乎符合规范，因此它应该是一个有效的解决方案

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

CSS3动画暂停/取消暂停跳过＆amp;跳进webkit

3 个答案: