4

我已经实现了动画暂停，如下所述： 如何使用 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;
}

我将一个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 说它应该可以在 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); }
}
4

3 回答 3

1

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

于 2012-12-14T15:17:42.327 回答
1

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

@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; }
}
于 2013-04-10T15:11:56.880 回答
1

我使用 CSS 在两个方向上基于 :hover 为 3D 轮播产品目录制作动画时有同样的跳跃感。

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

transition-duration: 0.2s;transition-property:transform;
于 2013-09-25T18:50:16.410 回答