みんなで一緒に!5分でCSSアニメーション

f:id:corp_monoxer:20211108175648p:plain

こんにちは、モノグサ開発チームのliminです。今回は誰でもCSSアニメーションを作成できるように実例で説明したいと思います。

そもそもCSSとは?

一言で言うと、「web要素(HTML tag)の見た目(styles)を指定できる言語」です。 ブラウザはHTML tagsをそれぞれデフォルトの形で表示させます。そして、CSSはそのデフォルトのstylesをオーバーライトできます。 さらに、CSSは静的stylesを指定できた上、動けるstyles、つまり「CSSアニメーション」も作成できます。

f:id:corp_monoxer:20211108141352g:plain
例:画像を動かすように

実例1:実例を参考しながら始めましょう!

まず、こちらで一番目の実例から見てみましょう。

アニメーションは以下の真ん中の一行のみで指定できます。ちなみに、一行目はターゲットのHTML要素を指定するCSS selectorsです。

f:id:corp_monoxer:20211108141544p:plain

animation: の後ろに4つのパラメーターがあり、以下のものになります。

  • animation-name
  • animation-duration  
  • animation-timing-function
  • animation-iteration-count  

animation-name 事前に定義した keyframes の名前を指定するフィールドです。

keyframes @keyframesとは一回のアニメーションの中でどんな動きをするかを指定できる属性です。 f:id:corp_monoxer:20211108142113p:plain 0%は開始時点での状態、そして100%は終了時点の状態です。0%, 100%の指定は必須です。それ以外はいくら「X%」を増やして状態を指定しても良いのです。 今回の実例は0%と100%で指定しかないため、途中の1%, 2%, ...99%などの状態が「線形補間」で自動生成されます。 f:id:corp_monoxer:20211108142155p:plain ちなみに、transformは回転以外、他の行為(移動、拡大)も指定できます。詳細はこちらで確認してください。

animation-duration アニメーションを1回回す時間を指定するフィールドです。こちらは1秒の場合「1s」です。

animation-timing-function 少し複雑なパラメーターですが、簡単に言うと「1回のアニメーションでどのように進行するのか」を設定できるフィールドです。「どのように進行する」はcubic-bezier関数で決められます。 基本的には以下のどちらかを設定すれば大丈夫です。 f:id:corp_monoxer:20211108144215p:plain

cubic-beizer関数はどのようにアニメーションに影響するのか、以下のリンクでご自由にお試しください。

https://cubic-bezier.com/ https://cubic-bezier.com/

animation-iteration-count デフォルトは1回で止まってしまいますが、infiniteで設定すれば無限ループができます。

実例2:遅延時間の応用

以下はこちらの実例で説明します。

今回のアニメーションは簡単。scaleを使って、「拡大⇨戻す」を繰り返すだけです。

f:id:corp_monoxer:20211108150054g:plain

animation-delay アニメーションの開始時間を遅らせる属性です。実例のように5つの要素が全部同じアニメーションでも、それぞれ違う遅延時間を指定すれば...

f:id:corp_monoxer:20211108151210g:plain

完全にローティングっぽい感じになりますね。 つまり、animation-durationanimation-delayをちゃんと合わせて調整すれば、簡単でいい感じなアニメーションが作れます。

f:id:corp_monoxer:20211108150439p:plain

f:id:corp_monoxer:20211108150251p:plain

他の属性変化も入れてみよう! 実例2のanimation-nameを変更してみよう!

f:id:corp_monoxer:20211108150936p:plain

f:id:corp_monoxer:20211108151009g:plain

f:id:corp_monoxer:20211108150950p:plain

f:id:corp_monoxer:20211108151029g:plain

本来のscale以外、背景色(background)、透明度(opacity)などの属性で指定すると全然違うアニメーションになります。

おまけ:自ら考えて試してみよう

f:id:corp_monoxer:20211108151110g:plain

できた方、おめでとうございます!上記で紹介した内容をしっかりと把握していただけたら、この動画のようなアニメーションを自分で作れるはずです。試してみましょう!

MonoxerはCSSアニメーションを使っていますか?

f:id:corp_monoxer:20211108151336g:plain 一番わかりやすいところは、ローディングのアニメーションです。これはreact-spinnersというライブラリのCSSアニメーションを使っています。今後はもっと多くの自作的なアニメーションを導入していくかもしれません。

以上です。最後までお読みいただき、ありがとうございました!

モノグサ株式会社では一緒に働く仲間を募集しています。

少しでも興味を持っていただけた方はぜひお話しましょう!

careers.monoxer.com