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

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