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

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 プロパティ を使用することもできます。

構文(Syntax)

CSS

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

DOM(JavaScript)

値の取得
object.style.animation
値の設定
object.style.animation="name duration timing-function delay iteration-count direction fill-mode play-state"

値(Values)

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

備考(Remarks)

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

Example