暂停 CSS 动画答案

【问题标题】：Pause a css animation暂停 CSS 动画
【发布时间】：2013-11-25 17:50:29
【问题描述】：

我已经找到了我的问题的答案，但是（作为一个新手）我不知道如何将它们应用到我正在使用的出色动画示例中。

如何在悬停时暂停？

.quote:nth-child(1) {
  -webkit-animation: cycle 15s 0s infinite linear;
  -moz-animation: cycle 15s 0s infinite linear;
  -ms-animation: cycle 15s 0s infinite linear;
  -o-animation: cycle 15s 0s infinite linear;
  animation: cycle 15s 0s infinite linear;
}

【问题讨论】：

How to pause and resume CSS3 animation using JavaScript? 的可能重复项
@OlivierH Javascript？

标签： css css-animations

【解决方案1】：

 .quote:hover { animation-play-state: paused; }

应该这样做。

文档：http://www.w3.org/TR/css3-animations/#animation-play-state

【讨论】：

如果您也使用兼容性属性，您也必须将其应用于这些属性。例如 -webkit-animation-play-state，但我强烈建议您不要使用这些“兼容性”属性，因为它们让用户“可以”使用过时的浏览器。

【解决方案2】：

CSS：

.quote:nth-child(1):hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

进一步阅读

“动画播放状态”属性定义动画是正在运行还是暂停。可以通过将此属性设置为“暂停”来暂停正在运行的动画。要继续运行暂停的动画，可以将此属性设置为“正在运行”。一个暂停的动画会在静止状态下继续显示动画的当前值，就好像动画的时间是常数一样。当暂停的动画恢复时，它会从当前值重新开始，不一定从动画的开头开始。 Animation events

【讨论】：

我确实在 stackoverflow 上找到了解决方案，但是这篇文章中没有一个对我有用。这是一个 JSFiddle：jsfiddle.net/bm77h

【解决方案3】：

这将帮助你http://www.w3schools.com/cssref/css3_pr_animation-play-state.asp animation-play-state 属性指定动画是正在运行还是暂停。

【讨论】：

这是真正的文档：w3.org/TR/css3-animations/#animation-play-state W3Schools 非常不可靠并且经常过时。