animation-play-state プロパティ

　animation-play-state プロパティは、CSSアニメーションの実行を一時停止、再生を指定するプロパティです。

　CSS アニメーションの実行を一時停止、再生をインタラクティブに操作するには JavaScript を使います。

再生と一時停止を繰り返す関数（Exampleを参照）

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

ページ内 Index

構文（Syntax）
Example
関連するプロパティ

構文(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になります。

HTML内容

CSS内容

関連プロパティ

　以下は関連するプロパティです。

プロパティ	概要
animation	CSSアニメーションのプロパティを一括指定
animation-delay	実行までの待ち時間。
animation-direction	再生/逆再生の設定。
animation-duration	CSS animationの実行時間。
animation-fill-mode	実行時間外の動作。
animation-iteration-count	再生回数。
animation-name	@keyframesセレクターで定義したCSS animation名。
animation-play-state	実行/停止かの設定。
animation-timing-function	CSS animationの実行速度曲線。