CSS3 -- アニメーションにおける注意

 animationを使う際に気をつけるべきこと。始点の定義。
 例えば何かしら回転し続けるアニメーションを作るとすると、ソースは以下のとおり。

<div class="loader"></div>
div.loader {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

これで1秒間に1回転、それを延々と繰り返すものが出来上がる。rotateのデフォルト値は0degではなくnoneのため、その定義が必要。また、この定義の位置はどこでもよく以下のようにも書ける。

div.loader {
	transform: rotate(0deg);
	animation: spin 1s linear infinite;
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

これでも同様の動作がされる。


 以下小話。
 何があったかというと
あれ?これrotateって最初0degだよな?
→ってことは”0%{中略}”いらないよな?
→あれ?なんでできないんだろう?以下略…
はい、ただのrotateの初期値が0degって知らなかっただけだという話。

 結論:ちゃんと知識つけましょう。

 …その、なんだ…0→360はいけるけどnone→360は無理だよ…うん……