暂停css动画

Question

我找到了问题的答案但是（作为新手）我无法弄清楚如何将它们应用到我正在使用的伟大动画示例中。

如何在悬停时暂停此操作？

.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;
}

Answer 1

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

应该这样做。

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

Answer 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-play-state'属性定义动画是在运行还是暂停。通过将此属性设置为“暂停”，可以暂停正在运行的动画。要继续运行暂停的动画，可以将此属性设置为“正在运行”。暂停的动画将继续以静态显示动画的当前值，就好像动画的时间是恒定的一样。当恢复暂停的动画时，它将从当前值重新开始，而不一定从动画的开头重新开始。 Animation events

Answer 3

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