例
アニメーションを一時停止：
div
{
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
} »それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
アニメーションプレイ-stateプロパティは、アニメーションが実行中または一時停止しているかどうかを指定します。
Note:サイクルの途中でアニメーションを一時停止するJavaScriptでこのプロパティを使用します。
| デフォルト値： | running |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about 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- |
CSSの構文
animation-play-state: paused|running|initial|inherit;プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| paused | アニメーションが一時停止されていることを指定します | それを再生します» |
| running | デフォルト値。 アニメーションが実行されていることを指定します | それを再生します» |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSS3のチュートリアル： CSS3アニメーション
HTML DOMリファレンス： animationPlayState property
その他の例
例
ホバー上のアニメーションを一時停止：
div:hover {
-webkit-animation-play-state: paused; /*
Chrome, Safari, Opera */
animation-play-state: paused;
}
»それを自分で試してみてください