CSS アニメーション – 要素に命を吹き込む

レクチャー 13: CSS アニメーション – 要素に命を吹き込む

「基礎から応用まで」 コースの講義 13 へようこそ!この投稿では、CSS アニメーション について説明します。これは、時間の経過とともにアニメーション化することで Web 要素に生命を吹き込む強力な方法です。 CSS アニメーションを使用すると、ユーザー エクスペリエンスとエンゲージメントを向上させる、スムーズでダイナミックな効果を作成できます。

---

1. CSS アニメーションの概要

CSS アニメーションを使用すると、要素は定義された期間にわたって異なるスタイル間を遷移できます。 2 つの主要なプロパティを使用してアニメーションの動作を制御できます:

• @keyframes: 特定の瞬間におけるアニメーションの動作を定義します。
• アニメーション: アニメーションを要素に適用し、そのタイミングと期間を制御します。

---

2. @keyframes ルール

@keyframes ルールは、アニメーション中のさまざまな時点で要素が持つ必要があるスタイルを指定します。さまざまなパーセンテージでキーフレームを定義します (0% が開始、100% が終了)。

• 例: 背景色を変更する基本的なキーフレーム アニメーション。

  @keyframes changeColor {
    0% {
      background-color: red;
    }
    100% {
      background-color: blue;
    }
  }

この例では:

• アニメーションが進むにつれて、背景色が赤から青に徐々に変化します。

---

3.アニメーションプロパティを使用してアニメーションを適用する

要素にアニメーションを適用するには、アニメーション プロパティを使用します。このプロパティにはいくつかのキー値が必要です:

• Name: キーフレーム アニメーションの名前 (changeColor など)。
• Duration: アニメーションを実行する時間 (例: 2 秒を 2 秒)。
• タイミング関数: アニメーションの速度曲線 (イーズ、リニアなど)。

• 遅延: アニメーションを開始するまでの待機時間。

• 例: 要素にアニメーションを適用します。
  

  .box {
    animation: changeColor 2s ease-in-out infinite;
  }

この場合:

• .box 要素は、イーズインアウト曲線に従って 2 秒かけて色が赤から青に変わり、アニメーションが無限に繰り返されます。

---

4.アニメーションのタイミング関数

タイミング関数は、時間の経過とともにアニメーションがどのように進行するかを制御します。一般的なタイミング関数には次のものがあります。

• リニア: アニメーションは一定の速度で進行します。
• イーズ: アニメーションはゆっくりと始まり、速度が上がり、その後遅くなります。
• イーズイン: アニメーションはゆっくりと始まり、徐々に速度を上げます。

• イーズアウト: アニメーションは速く始まり、遅くなります。

• 例: 別のタイミング関数を適用します。
  

  .box {
    animation: changeColor 3s linear;
  }

こちら:

• アニメーションは一定の速度で進行し、完了までに 3 秒かかります。

---

5.アニメーションの反復と遅延

animation-iteration-count プロパティを使用して、アニメーションを繰り返す回数を制御できます。また、アニメーション遅延を使用してアニメーションの開始を遅らせることもできます。

• 例: 3 回繰り返し、1 秒遅れて開始するアニメーション。

  .box {
    animation: changeColor 2s ease-in 3;
    animation-delay: 1s;
  }

この場合:

• アニメーションはページが読み込まれてから 1 秒後に始まり、3 回繰り返されます。

---

6.アニメーション塗りつぶしモード

animation-fill-mode プロパティは、アニメーションの前後で要素がどのように見えるかを定義します。一般的な値は次のとおりです:

• なし: 要素はアニメーション後に元の状態に戻ります。
• forwards: 要素はアニメーションの最終状態を保持します。

• backwards: 要素はアニメーションが開始する前の初期状態になります。

• 例: アニメーション後の最終状態を保持します。
  

  .box {
    animation: changeColor 2s ease forwards;
  }

こちら:

• アニメーションの完了後、要素は赤に戻るのではなく、青のままになります。

---

7.複数のアニメーション

コンマで区切ることにより、要素に複数のアニメーションを適用できます。

• 例: 色と位置の両方をアニメーション化します。

  @keyframes moveBox {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100px);
    }
  }

  .box {
    animation: changeColor 2s ease, moveBox 2s ease-in-out;
  }

この場合:

• .box の色が変わり、同時に右に 100 ピクセル移動します。

---

8.ブラウザのサポートと接頭辞付きプロパティ

最新のブラウザは CSS アニメーションをサポートしていますが、古いバージョンのブラウザにはベンダー プレフィックスを追加することをお勧めします。

• Example: Adding vendor prefixes.

  .box {
    -webkit-animation: changeColor 2s ease;
    -moz-animation: changeColor 2s ease;
    animation: changeColor 2s ease;
  }

This ensures compatibility across different browsers.

---

Practice Exercise

1. Create a bouncing ball animation using @keyframes that makes the ball move up and down smoothly.
2. Add an animation to an image that rotates it 360 degrees on hover.

---

Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.

---

follow me on LinkedIn

Ridoy Hasan

以上がCSS アニメーション – 要素に命を吹き込むの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。