コーディング

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

2016.12.30

2017.05.24

噴水のある広場

サイトにローディング表示や動きが必要な際にプログレスバーや回転アイコンを表示することがありますが、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について引き続き研究してみようと思います。

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

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる