animationプロパティ

animationプロパティは、アニメーション関連のプロパティを一括指定するプロパティです。以下のプロパティを同時に設定できます：animation-name、 animation-duration、 animation-delay、 animation-timing-function、 animation-iteration-count、 animation-direction、 animation-fill-mode、 animation-play-state。

値の順序は自由ですが、アニメーションの実行時間を指定するanimation-durationの値は、遅延時間を指定するanimation-delayの値より前に記述する必要があります。必須となるのはanimation-nameとanimation-durationの指定のみです。

また、このプロパティには値noneを指定でき、これはアニメーションを完全に無効にします。この値がデフォルト値です。

構文

セレクター {
	animation: 値;
}

例

この例では、アニメーションは（毎回再生開始前に）3秒の遅延があり、その後6秒間再生されます：

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation: move 6s infinite 3s linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

例 . 発生する可能性のある問題

短縮形で記述されたアニメーションは、その名前が原因で機能しない場合があります。次のアニメーションを見てみましょう：

@keyframes reverse {
	from {
		left: 0;
	}
	to {
	  left: 300px;
	}
}

アニメーションの名前としてreverseを使用していることに注意してください。一見問題なさそうですが、このアニメーションは動作しません。なぜならreverseは、animation-directionプロパティの有効なキーワードだからです。

同様に、アニメーション名に他のキーワードを使用した場合も、短縮形では動作しません。しかし、「完全な」形で記述すれば正常に動作します。

アニメーションを壊す可能性があるanimation-directionのキーワード値に加えて、イージング関数に関連するキーワードや、infinite、alternate、running、pausedなども同様の問題を引き起こす可能性があります。

animationプロパティ

構文

例

例 . 発生する可能性のある問題

関連項目