css - 暂停 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;
}

score 7 · Accepted Answer

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

应该这样做。

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

score 3 · Accepted Answer

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

进一步阅读

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

score -1 · Accepted Answer

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

css - 暂停 CSS 动画

3 回答 3

CSS：

进一步阅读

Related

Reference