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は無理だよ…うん……