CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけでSVGの矢印アイコンをバウンドさせるアニメーションの作り方

今回は、CSSアニメーションを使ってSVGの矢印アイコンを上下にバウンドさせる方法を解説します。さらに、CSSのさまざまなアニメーションプロパティを活用して、アニメーションの種類・タイミング・再生時間を自由に調整するテクニックも一緒に学んでいきましょう。

CSSだけでSVGの矢印アイコンをバウンドさせるアニメーションの作り方

なぜこの技術が役立つのか？

アニメーションは、適切に使えば次のような効果をもたらします。

  • ユーザーを目的の場所へ自然に導くことができる
  • ユーザーにアクション（クリックやスクロールなど）を促せる
  • ユーザーの関心があるうちに、注意を効果的に引きつけられる

必要な環境

このチュートリアルを進めるには、テキストエディタが必要です。ローカル開発環境をまだ用意していない方は、CodePen の利用をおすすめします。ブラウザ上ですぐにコーディングを始められます。

それでは、さっそく始めましょう！

HTML：コンテナと矢印を追加する

デモと同じ見た目を作るには、次の4つのHTML要素が必要です。

  • 矢印アイコン用のSVG要素
  • 矢印の上に表示するテキストラベル用のspan要素
  • 矢印とテキストラベルを包む container-footer 要素
  • すべての要素を包む container 要素

HTMLエディタを開き、<body></body> 内に以下のマークアップを追加してください。

<div class="container">
  <div class="container-footer">
    <span class="text-label">Explore</span>
    <svg
      class="arrow-circle-down bounce"
      viewbox="0 0 1792 1792"
      xmlns="https://www.w3.org/2000/svg"
    >
      <path
        d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"
        fill="#fff"
      ></path>
    </svg>
  </div>
</div>

上記で追加した矢印のコードはSVG形式で、Font AwesomeというCSSアイコンライブラリをベースにしています。

GitHubの公開リポジトリからは、SVG形式のFont Awesomeアイコンを数百種類の中から選ぶことができます。

リソースを節約しよう！

多くのWebサイトではFont Awesomeライブラリ全体を読み込んでいますが、実際に使うアイコンはごくわずかです。これは帯域の無駄遣いです。実際に必要な5〜10個程度のアイコンだけをSVG形式でダウンロードすれば、大幅にリソースを節約できます。

この例では、SVGファイルをHTMLマークアップ内に直接埋め込んでいます。この手法はインラインSVGと呼ばれます。SVGの組み込み方には用途に応じたさまざまな方法がありますが、それについては別のチュートリアルで解説します。

元のSVGソースと上記のHTMLを見比べると、いくつか変更を加えていることがわかります。

  • width と height プロパティを削除した（元のファイルサイズが大きすぎるため）
  • CSSセクションで必要になる arrow-circle-down クラスを追加した

次はスタイリングを加えて、いよいよ楽しいCSSアニメーションのパートへ進みます！

CSSでコンテナと矢印をスタイリングする

CSSファイルに、以下のルールセット（クラス・プロパティ・値）を追加しましょう。

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  background-color: #26a1ff;
  height: 100vh;
}

.container-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto auto 1rem auto;
}

.text-label {
  text-transform: uppercase;
  font-family: helvetica;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #fff;
}

.arrow-circle-down {
  display: block;
  width: 40px;
  height: 40px;
  margin: 16px 0;
}

ここでブラウザを更新すると、画面は次のように表示されるはずです。

CSSだけでSVGの矢印アイコンをバウンドさせるアニメーションの作り方

CSSで行っていることのポイントを整理します。

  • まず、親要素の .container クラスに height: 100vh; を指定し、デバイスに関係なくビューポート全体を占めるようにします。display: flex; を指定してフレックスコンテナにすることで、後ほど矢印とテキストラベルの配置に活用できます。あわせて、爽やかな水色の背景色も設定しています。
  • .arrow-circle-down クラスには、幅・高さともに40pxの固定サイズを指定し、画面内で占める面積を控えめにします。存在感はありつつも、目障りにならない絶妙なサイズ感です。
  • .text-label には大文字変換や文字間隔などの装飾的なスタイルを施しています。お好みに合わせて自由に変更してください。
  • .container-footer には上・右・左のマージンに auto を指定しています。これにより、フッターとその子要素（アイコン＆テキスト）が親コンテナの下部に押し込まれます。下マージンに 1rem; を設定しているのは、矢印がバウンドしてもすべての要素がビューポート内に収まるようにするためです。
  • .container-footer には flex-direction: column; と align-items: center; というフレックス関連のプロパティも指定しています。これにより、テキストとアイコンが縦に積み重なり、中央に正確に配置されます。

補足しておくと、margin: auto auto 1rem auto; という宣言は、以下の冗長な書き方をまとめた便利なショートハンドです。

margin-top: auto;
margin-right: auto;
margin-bottom: 1rem;
margin-left: auto;

次はいよいよ、CSSアニメーションで矢印をバウンドさせましょう！

CSSでスクロールダウン矢印をアニメーションさせる

アニメーションの実装方法には、CSSのみ、JavaScriptのみ、そして両者を組み合わせる方法など、実に多くの選択肢があります。この例では、純粋にCSSだけでアニメーションを実装します。

実は、SVG矢印を含む画像要素にはすでに .bounce クラスを追加済みです。ただし、まだCSS側でクラスを定義していないため、現時点では何も起きません。

以下のコードをCSSファイルに追加してください。

.bounce {
  animation: bounce 2s;
}

@keyframes bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-12px);
  }
}

これで、バウンドする矢印が完成しました。

CSSだけでSVGの矢印アイコンをバウンドさせるアニメーションの作り方

CSSコードの仕組みを詳しく解説

矢印のあるSVG要素には .bounce クラスが付いており、このクラスには animation プロパティが定義されています。

animationプロパティには「bounce」と「2s」という2つの値が指定されています。

bounce の値は、@keyframes bounce で定義されたキーフレームアニメーションを呼び出すための名前です。

2s（2秒）の値は、キーフレームアニメーション全体の再生時間を表します。

@keyframesアニメーションの構造：

  • 合計再生時間は2秒（animationプロパティで設定）
  • 0%、25%、40%、50%、60%、75%、100% の7つの異なるキーフレームで構成
  • Y座標の位置が3種類ある：Y(0)、Y(-20px)、Y(-12px)。この座標が、時間軸上のどの時点（キーフレーム）で矢印を上下させるかを決定しています

最初の@keyframesブロック {..} は、「0%、25%、50%、75%、100% の5つのキーフレームにおいて、矢印を開始位置であるY(0px)に置く」という意味です。

0%,
25%,
50%,
75%,
100% {
  transform: translateY(0);
}

2番目の@keyframesブロック は、「40%の時点で矢印をY(-20px)の位置へ移動させ、上方向へ跳ね上げる」という指定です。

40% {
  transform: translateY(-20px);
}

3番目のキーフレームブロック は、「60%の時点で再び矢印を上へ移動させる」というものですが、今回は初回の半分程度の距離であるY(-12px)までしか移動させません。

60% {
  transform: translateY(-12px);
}

注目したいのは、矢印が上に移動する2つのキーフレーム（40%と60%）の間にある50%のキーフレームで、矢印が一度Y(0)に戻る点です。まさにこれが、短時間のうちに矢印が素早く2回上下する動きを実現しています。

3回目の移動距離を-12pxに抑えたのは、現実のバウンドするボールの動きを模倣するためです。ボールは地面に2度目に当たったとき、初回よりはるかに低い高さしか跳ね返りません。ボールのバウンド具合（跳ね返る高さなど）は重量・速度・材質など複数の要因で決まりますが、だからこそ「唯一の正解」がなく、調整の自由度が高いとも言えます。

もしアニメーションのCSSが分かりにくいと感じたら、再生時間や transform: translate プロパティの値をいろいろといじってみてください。少し練習すれば、全体の仕組みがぐっと理解しやすくなります。

  • 40%のキーフレームのtranslate値を-48pxにしてみて、何が起こるか確認してみましょう。
  • animationプロパティの再生時間を2秒ではなく5秒に変えてみましょう。さらに100ミリ秒（秒の代わりにミリ秒も使えます）に設定してみると違いがよく分かります。

概念を深く理解するには、極端な値で実験するのが一番効果的です。私自身も「なるほど！」という瞬間は、だいたいそこで訪れます。

どんどん実験してみてください！

CSSアニメーションには無数の可能性があります。既存のアニメーションに加えられる、いくつかのバリエーションを簡単に見ていきましょう。

animation-delay プロパティ

現状では、Webページが読み込まれた瞬間に矢印がバウンドを始めます。ユーザーがサイトに入って数秒で気を散らされないよう、アニメーションの開始を遅らせたい場合もあるでしょう。

そんなときは、.bounce クラスに animation-delay プロパティを追加します。

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
}

これで、2秒間のキーフレームアニメーションは、ページ読み込みからちょうど5秒後に開始されるようになります。

animation-iteration-count プロパティ

アニメーションを複数回繰り返したい場合もあります。繰り返し回数を制御するには、animation-iteration-count プロパティを使います。

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
  animation-iteration-count: 2;
}

これで、矢印は5秒後にバウンドを開始し、さらにキーフレームアニメーションをもう1回繰り返します。

無限ループするCSSアニメーション

まれに、CSSアニメーションを無限に実行し続けたいケースもあります。その場合は、繰り返し回数を infinite; に変更します。

.bounce {
  animation: bounce 2s;
  animation-iteration-count: infinite;
}

ただし、無限ループするアニメーションの使用は慎重に行いましょう。永遠に動き続けるアニメーションを好むユーザーはいません。

例外としては、小さな星々がかすかに瞬くような、生きている雰囲気の背景演出などが挙げられます。こうした用途であれば、空気感を保ち続けるためにアニメーションをループさせる価値があるでしょう。

Autoprefixer（オートプレフィクサー）

このコードをすべてのモダンブラウザで確実に動作させるには、Autoprefixerの利用をおすすめします。ここではコードを短く読みやすく保つためにベンダープレフィックスを省略しましたが、プレフィックス済みのコード一式は、公開中のCodePenから入手できます。

CSSアニメーションの学習リソース

  • MDN Web Docs：CSS Animation（CSSアニメーション公式ドキュメント）

  1. CSSでスクロールバーを非表示にする方法をわかりやすく解説

    CSSでスクロールバーを非表示にする基本の方法Webページや特定の要素からスクロールバーを非表示にしたい場合、CSSのoverflowプロパティを使うのが最もシンプルな方法です。overflow: hidden;を指定すると、コンテンツが領域からあふれてもスクロールバーが表示されなくなります。実装例<!DOCTYPE html> <html> <head> <style> body { height: 150vh; width: 200vw; overflow: hidden;

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>