CSS トランジションとアニメーション

レクチャー 7: CSS トランジションとアニメーション

この講義では、CSS トランジションとアニメーションを使用して Web ページに命を吹き込む方法を学びます。これらのテクニックを使用すると、JavaScript を必要とせずに、ユーザー エクスペリエンスを向上させるスムーズで魅力的なエフェクトを作成できます。

---

CSS トランジションの概要

CSS トランジションを使用すると、指定した期間にわたってプロパティ値をスムーズに変更できます。これらは、ホバー効果、ボタン アニメーション、その他のインタラクティブな要素の作成に最適です。

1.基本的な構文

トランジションを作成するには、トランジションの CSS プロパティ、期間、およびオプションのイージング関数を指定する必要があります。

• 例:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

この例では、ホバーするとボタンの背景色が 0.3 秒かけて滑らかに変化します。

2.複数のプロパティの移行

カンマで区切ることにより、複数のプロパティを一度に遷移できます。

• 例:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

この例では、ホバー時にボックスの幅、高さ、背景色をスムーズに変更します。

3.緩和関数

イージング関数は、さまざまなポイントでトランジションの速度を制御し、イージングイン、イージングアウト、またはその両方などの効果を作成します。

• 一般的なイージング関数:
  • easy: ゆっくりと始まり、その後速度が上がり、その後再び速度が下がります。
  • リニア: 一定の速度を維持します。
  • easy-in: ゆっくりと始まり、その後速度が上がります。
  • ease-out: すぐに始まり、その後遅くなります。

CSS アニメーションの概要

CSS アニメーションを使用すると、単純な遷移を超えて、時間の経過とともに変化するより複雑なシーケンスを作成できます。複数のプロパティをアニメーション化し、タイミングを制御し、キーフレームを作成してより詳細に制御できます。

1.基本的な構文

アニメーションを作成するには、キーフレームを定義し、アニメーション プロパティを使用して要素に適用します。

• 例:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

この例では:

• @keyframes ルールはアニメーションのステップを定義し、背景の色と位置を変更します。
• .animate-box クラスは、5 秒間実行され、無限に繰り返されるアニメーションを適用します。

2.アニメーションのタイミングを制御する

アニメーションのタイミング、遅延、反復回数を制御できます。

• 例:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5秒: アニメーションの長さ
• ease-in-out: イージング関数。
• 1s: アニメーションが開始されるまでの遅延。
• 3: アニメーションは 3 回繰り返されます。
• 代替: アニメーションは反復ごとに方向を逆にします。

3.トランジションとアニメーションを組み合わせる

トランジションとアニメーションを組み合わせて使用​​すると、よりダイナミックな効果を作成できます。

• 例:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

この例:

• .button クラスはトランジションを使用して、ホバー時にボタンをわずかに拡大縮小します。
• .pulse-button クラスはアニメーションを使用して、連続的なパルス効果を作成します。

実践例:

トランジションとアニメーションを組み合わせて、応答性の高いインタラクティブなボタンを作成しましょう。

HTML:

<button class="animated-button">Hover Me!</button>

CSS:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

この例では:

• ボタンをホバーすると背景色が変わり、少し上に移動します。
• ボタンをクリックすると、カスタム アニメーションを使用してボタンが揺れます。

練習演習

1. トランジションを使用して、リンクの色を変更し、下線を追加するホバー効果を作成します。
2. 円内で要素を移動するキーフレーム アニメーションを作成します。
3. トランジションとアニメーションを組み合わせて、ボタンやカードなどのインタラクティブな要素を作成し、インタラクションに応じて拡大縮小、色の変更、アニメーション化を行います。

---

次のステップ: 次の講義では、CSS Flexbox の詳細を検討します。ここでは、Flexbox を最大限に活用して高度な応答性の高いレイアウトを作成する方法を学びます。乞うご期待!

---

LinkedIn でフォローしてください

リドイ・ハサン

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