animation プロパティ

　animation プロパティは、@keyframes セレクターで定義した CSS アニメーションをエレメントに反映するためのプロパティです。

　CSS を利用したアニメーションによって、タグエレメントに動きのある変化をもたせることができます。

animation プロパティの定義（Exampleを参照）

div:hover{
	animation: mymove 1s forwards;
}

@keyframes mymove {
	from {
	}
	to {
		box-shadow: 10px 10px;
	}
}

　GIFや動画、JavaScriptによるイメージを変化させるものもアニメーションと呼ぶため、ここでは CSS アニメーションと呼びます。
　エレメントに設定された影や形に変化を持たせることができるもので、ゲームキャラクターのようなアニメーションではありません。

　animation プロパティは、以下の CSS animation に関するプロパティを一括で定義できるプロパティです。

　簡易な CSS アニメーションには transition プロパティを使用することもできます。

- ad -

構文(Syntax)

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

値の取得

object.style.animation

値の設定

object.style.animation="name duration timing-function delay iteration-count direction fill-mode play-state"

Value	摘要
animation-name	@keyframesセレクターで定義したCSS animation名。
animation-duration	CSS animationの実行時間。
animation-timing-function	CSS animationの実行速度曲線。
animation-delay	実行までの待ち時間。
animation-iteration-count	再生回数。
animation-direction	再生/逆再生の設定。
animation-fill-mode	実行時間外の動作。
animation-play-state	実行/停止かの設定。
initial	初期値に戻す。
inherit	親エレメントのプロパティを継承。


初期値（Default value）	none 0 ease 0 1 normal none running
継承（Inherited）	no
変化（Animatable）	no

- ad -