備忘録的プログラミングリファレンス

animation-play-stateプロパティ

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

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

再生と一時停止を繰り返す関数（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>

関連プロパティ

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

プロパティ概要
animationCSSアニメーションのプロパティを一括指定
animation-delay実行までの待ち時間。
animation-direction再生/逆再生の設定。
animation-durationCSS animationの実行時間。
animation-fill-mode実行時間外の動作。
animation-iteration-count再生回数。
animation-name@keyframesセレクターで定義したCSS animation名。
animation-timing-functionCSS 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になります。