CSS

Cascading Style Sheets animation property.

animation

　animationプロパティは、要素にキーフレームアニメーションを適用する場合に、アニメーションについてまとめて指定する際に使用します。

　animationプロパティでは、

animation-name

アニメーション名を指定する。

animation-duration

アニメーション１回分の時間の長さを指定する。

animation-timing-function

アニメーションのタイミング・進行割合を指定する。

animation-delay

アニメーションがいつ始まるかを指定する。

animation-iteration-count

アニメーションの繰り返し回数を指定する。

animation-direction

アニメーションを交互に反転再生させるかどうかを指定する。

animation-fill-mode

アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。

animation-play-state

再生中か一時停止かを指定する。

これらのプロパティの値を、組み合わせて指定することができます。省略された値はそれらの初期の値に設定されます。

初期値

一括指定の次の各プロパティとして

• animation-name : none
• animation-duration : 0s
• animation-timing-function : ease
• animation-delay : 0s
• animation-iteration-count : 1
• animation-direction : normal
• animation-fill-mode : none
• animation-play-state : running

適用対象

すべての要素、::fefore / ::after 擬似要素

継承

なし

Sample

<p class="test">Animation</p>

.test {
	font-size: 3em;
	animation: slideIn 2s infinite;
}

@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translateX(100px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}