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

animation-duration プロパティ

　animation-duration プロパティは、CSS アニメーションの再生時間を指定するプロパティです。
　初期値は0で、何ら実行はされません。

再生時間を指定（EXAMPLEを参照）
div:hover{
	animation: mymove forwards;
	animation-duration: 2s;
}

@keyframes mymove {
	from {

	}
	to {
		box-shadow: 10px 10px;
	}
}

関連プロパティ

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

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

ページ内 Index

構文(Syntax)

CSS

animation-duration:[ time | initial | inherit];

DOM ( JavaScript )

値の取得
object.style.animationDuration
値の設定
object.style.animationDuration ="[ time | initial | inherit]"

値（Values）

Value摘要
time初期値（default値）は0。単位は"s"または"ms"。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考（Remarks）

初期値（Default value）0
継承（Inherited）no
変化（Animatable）no

Example

　animation-durationの例です。マウスポインターが以下のエレメントに乗ると影が出現します。 CSSアニメーションの開始から２秒間で終わります。animation-duration プロパティは、終了までの時間を指定することができます。

関連CSSプロパティ

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

関連（Related）