アニメーションのプロパティ

7.1 animation-name プロパティ

CSSアニメーションは動的でスムーズなビジュアルエフェクトを作り出し、ユーザーインターフェースを改善して、 よりインタラクティブにすることができるんだ。アニメーションプロパティは、名前、継続時間、タイミング関数、 遅延など、アニメーションのさまざまな側面を制御することができるよ。今からこれらのプロパティを詳しく見て、 使い方を示していくね。

animation-name プロパティは、要素に適用されるアニメーションの名前を定義する。名前は @keyframes で定義された名前と一致する必要があるんだ。

構文:

    
      element {
        animation-name: animation-name;
      }
    
  

どこで:

• animation-name: @keyframes で定義されるアニメーションの名前

例:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
      }
    
  

コードの説明:

• @keyframes moveRight: moveRight という名前のアニメーションを定義し、右に要素を動かす
• .box: moveRight アニメーションが適用された要素

7.2 animation-duration プロパティ

animation-duration プロパティはアニメーションの継続時間を定義する。値は秒 (s) またはミリ秒 (ms) で指定されるんだ。

構文:

    
      element {
        animation-duration: time;
      }
    
  

どこで:

• time: アニメーションの継続時間 (例えば、2s は2秒、500ms は500ミリ秒)

例:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
      }
    
  

コードの説明:

• animation-duration: 2s: moveRight アニメーションの継続時間を2秒に設定する

7.3 animation-timing-function プロパティ

animation-timing-function プロパティは、アニメーションが時間経過に伴って変化する速度を定義するんだ。 加速や減速など、さまざまなアニメーション効果を作り出すことができるよ。

構文:

    
      element {
        animation-timing-function: function;
      }
    
  

どこで:

• function: アニメーションの速度を決定するタイミング関数 (例えば、ease, linear, ease-in, ease-out, ease-in-out)

例:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
      }
    
  

コードの説明:

• animation-timing-function: ease-in-out: moveRight アニメーションのタイミング関数を設定し、 アニメーションをスムーズに始めと終わりを遅くして、中央を速くする

主なタイミング関数:

• ease: アニメーションはゆっくり始まり、中間で加速し、終わりで減速する
• linear: アニメーションは最初から最後まで一定の速度で進む
• ease-in: アニメーションはゆっくり始まり、その後加速する
• ease-out: アニメーションは速く始まり、その後減速する
• ease-in-out: アニメーションはゆっくり始まりと終わりを持ち、中間が速い

7.4 animation-delay プロパティ

animation-delay プロパティは、アニメーションが始まる前の遅延を定義する。値は秒 (s) またはミリ秒 (ms) で指定されるんだ。

構文:

    
      element {
        animation-delay: time;
      }
    
  

どこで:

• time: アニメーションが始まる前の遅延 (例えば、1s は1秒、500ms は500ミリ秒)

例:

    
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(100px);
        }
      }

      .box {
        animation-name: moveRight;
        animation-duration: 2s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
      }
    
  

コードの説明:

• animation-delay: 1s: moveRight アニメーションの開始前に1秒の遅延を設定する