css animation まとめ

何となく毎回コピペで済ましていたcss animationを整理する

animationプロパティは、下記のプロパティをまとめて指定する。

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

animation-name

キーフレームでアニメーションを指定する。

animation-name: anime01;

@keyframes anime01 {
	0% {
		width: 50px;
		height: 50px;
	}
	100% {
		width: 200px;
		height: 50px;
	}
}

animation-duration

アニメーション1回分の長さを秒数で指定

animation-timing-function

イージングを指定

* ease
* linear
* ease-in
* ease-out
* ease-in-out

animation-delay

アニメーションがいつ始まるか。
-Xsの値にすると、X秒前からアニメーションが始まったように実行される。

animation-iteration-count

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

infinite: 無限に再生を繰り返す

数値: 再生回数（初期値 1 ）

animation-direction

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

normal: 一定方向で繰り返す 初期値

alternate: 偶数回目のアニメーションで逆方向になるように繰り返す（行ったり来たりする）