Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

animation-play-state

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

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)
? ? ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: teoli, ethertank, yyss, FredB
 最終更新者: teoli,