ITコース CSS基礎 027_アニメーションとトランジション

アニメーション

CSSアニメーションは、要素のプロパティ値を徐々に変化させるために使用できるエフェクトです。アニメーションは、幅、高さ、色、背景、境界線など、任意のCSSプロパティに適用できます。

animationプロパティの構文は以下の通りです：

• name：アニメーションの名前を指定します。
• duration：アニメーションの持続時間を指定します。
• timing-function：アニメーションの速度曲線を指定します。
• delay：アニメーションの遅延を指定します。
• iteration-count：アニメーションの再生回数を指定します。
• direction：アニメーションの再生方向を指定します。
• fill-mode：アニメーション完了後、またはアニメーションが一時停止または停止した後の要素のスタイルを指定します。

例：

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* アニメーションを適用、2秒継続、無限ループ、線形トランジション */
14
  }

1
    <div class="example1"></div>

効果：

• @keyframes rotateは、初期状態（0度回転）から終了状態（360度回転）までのrotateという名前のキーフレームアニメーションを定義します。
• .animated-box要素はこのアニメーションを適用し、animationプロパティを通じてアニメーション名、持続時間、ループ方法などを指定します。

CSSアニメーションとCSSトランジションはどちらも、要素のプロパティ値を徐々に変化させるために使用できるエフェクトです。両者の主な違いは：

• アニメーションは繰り返し再生できますが、トランジションは1回しか再生できません。
• アニメーションは再生方向を指定できますが、トランジションはできません。
• アニメーションはアニメーション完了後、またはアニメーションが一時停止または停止した後の要素のスタイルを指定できますが、トランジションはできません。

トランジション

CSSトランジションは、要素のプロパティ値を徐々に変化させるために使用できるエフェクトです。トランジションは、幅、高さ、色、背景、境界線など、任意のCSSプロパティに適用できます。トランジションの効果はブラウザやデバイスによって異なる場合があり、トランジションのパフォーマンスはトランジションの複雑さによって異なる場合があります。

例：

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* トランジションプロパティと時間を定義 */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

効果：