これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
animation-play-state CSS プロパティは、アニメーションが実行中か、一時停止されているかを判定します。このプロパティの値を取得することで、アニメーションが実行中か否かを調べることができます。また、このプロパティの値を設定することで、アニメーションを一時停止させたり、再開させたりすることができます。
一時停止されたアニメーションを再開すると、アニメーションは最初から始まるのではなく、一時停止された時点から始まります。
| 初期値 | running |
|---|---|
| 適用対象 | 全要素、::before / ::after 疑似要素 |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値 |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
書式: [ running | paused ] [, [ running | paused ] ]*
animation-play-state: running animation-play-state: paused animation-play-state: paused, running, running
値
running- アニメーションは実行中です。
paused- アニメーションは一時停止しています。
例示
CSS アニメーションの頁を参照してください。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Animations Level 3 | 草案 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | (有)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12 -o 12.10 # |
(有)-webkit |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有)-webkit | 5.0 (5.0)-moz 16.0 (16.0) |
? | ? | ? |