CSS animationを制御する@keyframesの使い方

サイトにローディング表示や動きが必要な際にプログレスバーや回転アイコンを表示することがありますが、CSS animationを利用するとjsやgif画像を使わずにcssでそれらを実現することができます。
更に@keyframesを利用するとその動きの変化を制御することができ、CSS animationの編集範囲がぐんと広がります。

やれることが多くある機能ですので今回はそんな@keyframesの基本的な仕組みをご紹介します。

座標を指定して動きの範囲を指定する@keyframes

@keyframesは動きの中間地点を指定して、同時にその地点からどう動くかの指示を行うことができます。まずは動きを見てみましょう。

See the Pen ENBNKV by hoshu_t (@hoshu_t) on CodePen.

上記は「動き全体の50%でleft:100%まで移動、残り~100%でleft:0%まで移動」を行っています。transform:translateはpositionが四角形の左上基準なので、50%のときにハミ出さないよう-100%がかかっています。

これを応用すると以下の様な回転アイコンが実現できます。

See the Pen JbQEva by hoshu_t (@hoshu_t) on CodePen.

応用すると曲線的な動きも実現可能です。あまり多用するとうるさくなってしまうので、効果的なポイントを狙って使うことで印象に残る仕掛けとして利用できるといいかもしれません。
自由度の高い@keyframesについて引き続き研究してみようと思います。

参考記事:うつつのがれ｜四角がぐるぐる回るローディングアイコン