CSS3 animation-play-state プロパティ

アニメーションを一時停止します：

div {
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}

他の "Try it Yourself" の例は、下をご覧ください。

定義と用法

animation-play-state プロパティは、アニメーションの実行と一時停止を指定します。

注: サイクルの途中でアニメーションを一時停止するには、JavaScript でこのプロパティを使用します。

デフォルト値：	running
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.animationPlayState="paused" Try it

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

-webkit-、-moz-、-o- の後に続く数字は、接頭辞付きで動作した最初のバージョンです。

プロパティ
animation-play-state	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

animation-play-state: paused|running|initial|inherit;

値	説明	Play it
paused	実行中のアニメーションの一時停止を指定します	Play it ❯
running	デフォルト値。一時停止中のアニメーションを再実行することを指定します	Play it ❯
initial	プロパティにデフォルト値を設定します。initial を参照
inherit	このプロパティは親要素を継承します。inherit を参照

ホバーしたアニメーションを一時停止します：

div:hover {
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}