animation-play-stateプロパティ
animation-play-stateプロパティは、CSSアニメーションの実行を一時停止、再生を指定するプロパティです。
CSSアニメーションの実行を一時停止、再生をインタラクティブに操作するにはJavaScriptなどのscriptを使います。
<script type="text/javascript"> function get_run_pause(){ var trgt_obj = document.getElementById('contents'); if(trgt_obj.style.animationPlayState == "running"){ trgt_obj.style.animationPlayState = "paused"; }else{ trgt_obj.style.animationPlayState = "running"; } } </script>
関連プロパティ
以下は関連するプロパティです。
プロパティ | 概要 |
---|---|
animation | CSSアニメーションのプロパティを一括指定 |
animation-delay | 実行までの待ち時間。 |
animation-direction | 再生/逆再生の設定。 |
animation-duration | CSS animationの実行時間。 |
animation-fill-mode | 実行時間外の動作。 |
animation-iteration-count | 再生回数。 |
animation-name | @keyframesセレクターで定義したCSS animation名。 |
animation-timing-function | CSS animationの実行速度曲線。 |
構文(Syntax)
CSS
animation-play-state: [ running | paused | initial | inherit ];
DOM(JavaScript)
object.style.animationPlayState
object.style.animationPlayState="[ running | paused | initial | inherit ]"
値(Values)
Value | 摘要 |
---|---|
running | 初期値(default値)で再生設定 |
paused | 一時停止 |
initial | 初期値に戻す。 |
inherit | 親エレメントのプロパティを継承。 |
備考(Remarks)
初期値(Default value) | running |
継承(Inherited) | no |
変化(Animatable) | no |
Example
animation-play-stateの例です。エレメントの影が伸び縮みするCSSアニメーションです。「CSSアニメーションを一時停止/再生」ボタンでCSSアニメーションの一時停止、再生ができます。
animation-play-stateの設定値をCSSで指定しても、JavaScriptで読み取るとNULLになります。
関連(Related)
HTML、CSS、DOMのCSSアニメーションに関する用途一覧です。 CSSアニメーションができるかはCSSのプロパティによります。
HTML
CSS
DOM
- インターフェース
- AnimationEvent、 PopStateEvent
- イベント
- animationend、 animationiteration、 animationstart
- プロパティ
- animationName、 elapsedTime、 propertyName
- メソッド