animationを使ってアニメーション
animationなら
transitionより複雑なアニメーションができる
transitionは、プロパティの変化の仕方を指定しただけ
animationては、
キーフレームを使うことで
様々な制御が可能
キーフレームは@keyframes
というキーワードを使い指定する
@keyframesの
キーフレームの設定は
アニメーション全体に対するバーセンテージで表す
最初は 0%
中間は 50%
最後が 100%
となり
このバーセンテージで示したところに
スタイルを適用することで
キーフレーム間でアニメーションが実現する
@keyframesの書式は
@keyframes アニメーション名{
0% { 変化させるプロパティ : 値; }
25% { 変化させるプロパティ : 値; }
….
100% {変化させるプロパティ : 値 }
}
となる