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

CSSを使用してバウンドするSVGアイコンをアニメーション化する方法

今日は、CSSアニメーションを使用して矢印SVGアイコンを上下にバウンスさせる方法を学習します。また、多くのCSSアニメーションプロパティのいくつかを使用して、アニメーションタイプ、タイミング、および期間を微調整する方法についても学習します。

CSSを使用してバウンドするSVGアイコンをアニメーション化する方法

なぜこれが役立つのですか？

アニメーションは、正しく実行されると、次のことができます。

  • ユーザーをガイドする
  • ユーザーに行動を起こすように促します
  • ユーザーの注意を引き付けます（まだそれを持っている間）。

要件

フォローするにはテキストエディタが必要です。独自のローカル開発環境がない場合は、CodePenをお勧めします。すぐにコーディングを開始できます。

さあ、始めましょう！

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

デモの例を再現するには、次の4つのHTML要素が必要です。

  • 矢印アイコンの画像要素
  • 矢印の上のテキストラベルのスパン要素
  • 矢印とテキストラベルを囲むためのコンテナフッター要素
  • すべての要素をラップするコンテナ要素

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形式です。 FontAwesomeCSSアイコンライブラリに基づいています。

このGitHubリポジトリから、SVG形式の何百ものFontAwesomeアイコンから選択できます。

リソースを節約してください！

多くのWebサイトは、Font Awesomeライブラリ全体をWebサイトにロードしますが、使用するアイコンはほんの一握りです。これは帯域幅の浪費です。実際に必要な5〜10個のアイコンをSVG形式でダウンロードすることで、多くのリソースを節約できます。

この例では、SVGファイルをHTMLマークアップに直接埋め込みます。このアプローチはインラインSVGと呼ばれます。 さまざまな目的でSVGを追加する方法は他にもたくさんありますが、別のチュートリアルのために保存しておきます。

このチュートリアルでは、このSVGアイコンを使用しています。

元のSVGソースを上記のHTMLマークアップに表示されているものと比較すると、私がいくつかの変更を加えたことがわかります。

  • 幅と高さのプロパティを削除しました（元のファイルが大きすぎます）
  • クラスを追加しました：arrow-circle-down これはCSSセクションで必要になります。

次は、少しスタイリングを追加してから、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で何が起こっているのか：

  • 最初に、親のdiv要素の.containerを指定します 100vhの高さ値をクラス化します。これにより、デバイスに関係なく、ビューポート全体が使用されます。 display: flex;を使用します 矢印とテキストラベルに必要なフレックスコンテナにするためのプロパティ。また、素敵な水色の背景色を付けています。
  • 次に、.arrow-circle-downを指定します。 固定の幅と40ピクセルの高さを分類して、スペースを取りすぎないようにします。目立つはずですが、気を散らすものではありません。
  • .text-label 大文字のプロパティといくつかの文字間隔を使用して、少し化粧品のスタイリングを取得します。これをお好みに合わせて自由に変更してください。
  • .container-footerを提供します 上、右、左のマージン自動プロパティ。これにより、コンテナフッターとその子（アイコンとテキスト）が親コンテナの下部に強制的に配置されます。これは、必要な場所です。下の余白は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でアニメーション化します。

すでに.bounceを追加しています SVG矢印を含む画像要素へのクラス。これまでのところ、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というプロパティがあります 。

アニメーションプロパティには、bounceという2つの値があります および2s 。

bounce valueは、@keyframeアニメーション@keyframes bounceをトリガーする関数です。 すぐにわかります。

2s 値（2秒）は、@keyframeアニメーションを実行する必要がある合計時間です。

@keyframeアニメーション：

  • 合計時間は2秒です（animation property. ）
  • 合計7つの異なるキーフレームがあります。 0％、25％、40％50％、60％75％、100％。
  • Y（0）、Y（-20px）、Y（-12px）の3つの異なるY座標位置があります。これらの座標は、矢印要素が時間の異なるポイント（キーフレーム）で上下に移動するかどうかを決定するものです。

最初の@keyframeブロック{..} 正確にこれらの5つのキーフレーム（0％、25％、50％、75％、および100％）で、矢印は開始位置であるY（0px）にある必要があると言います。

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

2番目の@keyframeブロック 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番目のダウンは、1回目よりもはるかに少ないレベルで移動します。もちろん、ボールが跳ね返る量（および高さ）は、重量、速度、材料の種類などの複数の要因によって決まりますが、一方向がないため、より多くの揺れの余地があります。 それを行うには。

アニメーションのCSSがわかりにくい場合は、期間とCSS transform translateをいじってみてください。 財産。少し練習すれば、点を結ぶのがはるかに簡単になります。

  • 40％キーフレームに-48pxの変換変換プロパティを与えて、何が起こるかを確認してください。
  • CSSanimationを与えるようにしてください プロパティの持続時間は2ではなく5秒です。次に、100msの値を指定してみてください（秒の代わりにミリ秒を使用できます）。

極端な実験を行うと、コンセプトを家に持ち帰るのが簡単になることがよくあります。それは通常、私が「あは」の瞬間を持っている場所です。

実験してください！

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

animation-delayプロパティ

現在、ウェブページが読み込まれるとすぐに矢印がバウンドします。サイトにアクセスしてから数秒以内にユーザーが気を散らさないように、少し遅らせたい場合があります。

これを行うには、animation delayを追加します .bounceのプロパティ このようなクラス：

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

これで、2秒のキーフレームアニメーションは、ページが読み込まれてからちょうど5秒後まで実行を開始しません。

アニメーションの反復回数プロパティ

アニメーションを数回繰り返したい場合があります。アニメーションを繰り返すには、animation-iteration-countを使用します このようなプロパティ：

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

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

無限のCSSアニメーション

まれに、CSSアニメーションを無限に実行したい場合があります。これを行うには、アニメーションの反復回数をinfinite;に変更します。 このように：

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

しかし、無限のアニメーションで慎重に踏みます。永遠に回転するアニメーションが好きな人はいません。

例外は、微妙に点滅するアニメーションを備えた小さな星がたくさんある、ある種の生活空間の背景がある場合です。雰囲気をダイナミックに保つために、そのタイプの目的のためにアニメーションをループ/リピートすることをお勧めします。

自動プレフィックス

このコードを最新のすべてのブラウザで機能させるには、自動プレフィックスを使用する必要があります。コードを短くして読みやすくしたかったので、ここのコードには追加しませんでした。このCodePenにアクセスすると、プレフィックス付きのプロパティを含むすべてのコードを取得できます。

CSSアニメーションリソース

  • MDN Web Docs：CSSアニメーション

  1. CSSでスクロールバーを非表示にする方法は？

    CSSでスクロールバーを非表示にするには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style>    body {       height: 150vh;       width: 200vw;       overflow: hidden;       font-family: "Segoe UI", Tahoma, Geneva,

  2. CSSで矢印を作成するにはどうすればよいですか？

    CSSで矢印を作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;