CSSでアニメーションを実装しよう！

こんにちは！
昨日なかなか寝付けず少ししんどいGlobal Web Designの福田です(笑)

Web制作をするときにアニメーションなど動的に要素を動かしたりするときはJavaScriptが多いですが、CSSでアニメーションできるのを知っていましたか？

ちょっとしたアニメーションをするときにCSSアニメーションはとても便利で、私もよく使っています。
そこで今回はCSSアニメーションをご紹介したいと思います！

CSSアニメーションのメリット

CSSのアニメーションは従来のスクリプトにくらべると3つのメリットがあります。

1. 単純なアニメーションに使いやすく出来ているため、JavaScriptを知らなくてもアニメーションを作れる
2. JavaScriptでは単純なアニメーションでもシステム負荷が高くなることがあるが、CSSアニメーションはシステム負荷が少なく済む
3. ブラウザーはアニメーションの流れを制御して、パフォーマンスや効率を最適化する。

CSSアニメーションは単純なアニメーションであれば、簡単につくることができ、負荷も少なくて済むというメリットがあります。

CSSアニメーションを実装してみる

今回はWebサイトのメインビジュアルの下などにある、「Scroll」の矢印がちょんちょんと動くアニメーションを実装していきます。

HTMLを

<div>
  <p>scroll</p>
  <!-- 下矢印 -->
  <i class="fa-solid fa-down-long"></i>
</div>

のように書いてブラウザを見ると、

このようになります。
今回下の矢印はFont Awesomeを使っています。

Font Awesomeは無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富なのでWeb制作のさまざまな場面で使用されます。
今回はCDNを使っていますので、headタグ内に

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

のコードを入れて

<i class="fa-solid fa-down-long"></i>

でアイコンを表示させています。

ここからCSSアニメーションを実装していくわけですが、CSSで「animation」プロパティを使ってアニメーションを実装します。

animation

「animation」はCSSの一括指定プロパティで、スタイルのアニメーションを適用します。
今回は一括指定だとわかりにくいので、それぞれの「animation」プロパティを使っていきます。

animation-name

「animation-name」は要素に適用するアニメーションを記述する「@keyframes」の名前を指定します。
「animation-name」でつけた名前を「@keyframes」でアニメーションさせます。
今回は下に動かしたいので「down」という名前をつけます。

i{
  padding-left: 15px;
  animation-name: down;/* アニメーションの名前 */
}

animation-duration

「animation-duration」は1回のアニメーションが完了するまでの所用時間を設定します。
今回の矢印は5秒かけてアニメーションさせたいので

i{
  padding-left: 15px;
  animation-name: down; /* アニメーションの名前 */
  animation-duration: 5s; /* アニメーションの所要時間 */
}

「animation-duration: 5s;」と書きます。

animation-timing-function

「animation-timing-function」はアニメーションの周期の中でどのように進行するか設定します。
動画制作などでイージングを使う方にはなじみがあると思いますが、アニメーションの速度に緩急を設定できます。

「animation-timing-function」の値でよく使うものは

• ease アニメーションの中央に向けて変化量が増え、最後に向けて減少
• linear 等しい速度でアニメーション
• ease-in 最初はゆっくり始まり、終わりまで加速
• ease-out 速く始まり、終わりまで速度を落とす
• ease-in-out アニメーションがゆっくり変化し、速度を上げたあと、また速度を落とす

になります。
今回は「ease-in」を使います。

i{
  padding-left: 15px;
  animation-name: down; /* アニメーションの名前 */
  animation-duration: 5s; /* アニメーションの所要時間 */
  animation-timing-function: ease-in; /* アニメーションの周期中の進行 */
}

animation-iteration-count

「animation-iteration-count」は停止するまでのアニメーション周期の再生回数を指定します。
「animation-iteration-count: 2;」とすると2回再生されたあとに、アニメーションが止まります。
今回は無限にアニメーションさせたいので

i{
  padding-left: 15px;
  animation-name: down; /* アニメーションの名前 */
  animation-duration: 5s; /* アニメーションの所要時間 */
  animation-timing-function: ease-in; /* アニメーションの周期中の進行 */
  animation-iteration-count: infinite; /* アニメーションの再生回数 */
}

「infinite」無限の設定にします。

今回使うのはこの「animation」プロパティですが、他にもあるのでご紹介します。

animation-delay

「animation-delay」は要素が読み込まれてからアニメーションが始まるまでの遅延時間を設定します。
「animation-delay: 2s;」と書くと要素が読み込まれた2秒後にアニメーションがスタートします。

animation-fill-mode

「animation-fill-mode」はCSSアニメーションの実行の前後にどのように対象にスタイルを適用するかを設定します。

CSSアニメーションはキーフレームを使ってアニメーションさせます。

@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

このような感じで書いていきますが、このキーフレームはスタート(0%)は透明で、アニメーションの最後(100%)は透明度なしという設定になります。

「animation-fill-mode」の値は

• none アニメーションが実行されていないときは、対象にスタイルを適用しない
• forwards 対象は最後のキーフレームの計算値を保持します。
• backwards 対象は最初のキーフレームの計算値を保持
• both 「forwards」と「backwards 」の両方の規定に従う。

「fowards」は上のキーフレームのCSSでいうと、アニメーションしたあと「opacity: 1;」を保持します。
「backwards」は上のキーフレームのCSSでいうと、アニメーションしたあと「opacity: 0;」を保持します。

animation-play-state

「animation-play-state」はアニメーションが実行中か停止中か設定します。
「animation-play-state」の値は

• paused 停止中
• running 実行中

となります。

@keyflames でアニメーションを設定

「animation」プロパティでアニメーションの設定をして、実際にアニメーションの動きを「@keyflames」で設定します。
「@keyflames」の後ろに「animation-name」で決めた名前を入れます。

先ほど使ったキーフレームを使うと

i{
  padding-left: 15px;
  animation-name: down; /* アニメーションの名前 */
  animation-duration: 5s; /* アニメーションの所要時間 */
  animation-timing-function: ease-in; /* アニメーションの周期中の進行 */
  animation-iteration-count: infinite; /* アニメーションの再生回数 */
}
/* キーフレーム */
@keyframes down{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

このようになり、ブラウザで見てみると

矢印が5秒間かけて「opacity: 0;」から「opacity: 1;」になっています。
「0%」はアニメーションの開始時のCSSで、「100%」はアニメーション終了時のCSSの状態を表しています。

今回はちょんちょんと矢印を動かしたいのでキーフレームをこのように書きます。

i{
  padding-left: 15px;
  animation-name: down; /* アニメーションの名前 */
  animation-duration: 5s; /* アニメーションの所要時間 */
  animation-timing-function: ease-in; /* アニメーションの周期中の進行 */
  animation-iteration-count: infinite; /* アニメーションの再生回数 */
}
/* キーフレーム */
@keyframes down{
  0%{
    transform: translateY(0);
  }
  5%{
    transform: translateY(10px);
  }
  10%{
    transform: translateY(0);
  }
  15%{
    transform: translateY(10px);
  }
  20%{
    transform: translateY(0);
  }
  25%{
    transform: translateY(10px);
  }
  30%{
    transform: translateY(0);
  }
}

「transform: translateY();」を使って矢印を動かしています。
完成はこちら

See the Pen Untitled by Fukuda Yuzuru (@fukuda-yuzuru) on CodePen.

まとめ

いかがでしょうか？
今回はCSSアニメーションをご紹介しました！

簡単なアニメーションであればJavaScriptを使わずに書けるのでとても便利がいいです。
CSSアニメーションでWebサイトに動きを入れて目に止まるような動きをつけることができます。

今回ご紹介したCSSアニメーションを使ってWebサイトにアニメーションをつけれるようになれば嬉しいです！

この記事を書いた人

福田 弦

2020年にGlobal Web Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。趣味はドラム。