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

Answer 1

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

やるべきです。

ドキュメント: http://www.w3.org/TR/css3-animations/#animation-play-state

Answer 2

http://www.w3schools.com/cssref/css3_pr_animation-play-state.asp animation-play-state プロパティは、アニメーションが実行中か一時停止中かを指定します。