トランジション

4.1 transitionプロパティ

CSSのトランジションは、CSSプロパティの値の変化をアニメーション化し、開始状態と終了状態の間でスムーズな移行を作り出す。このパワフルなツールは、Webページに動きを加え、使いやすさを向上させる。トランジションのプロパティ、持続時間、タイミング関数などの基本的な側面について考えよう。

transitionプロパティは、トランジションの全ての側面を一つのプロパティにまとめることができる。以下を含めることができるよ:

1. アニメーション対象のプロパティ。
2. アニメーションの持続時間。
3. タイミング関数。
4. アニメーション開始前の遅延（オプション）。

構文：

    
      element {
        transition: property duration timing-function delay;
      }
    
  

ここで:

• property: トランジションが適用されるプロパティ（例: width, height, background-color）
• duration: トランジションの持続時間（例: 2sは2秒、500msは500ミリ秒）
• timing-function: アニメーションの変更速度を定義するタイミング関数（例: ease, linear, ease-in, ease-out, ease-in-out）
• delay: トランジション開始前の遅延（例: 1sは1秒）

例：

    
      
       
   
       
   
       
   

     コンテンツ 
   
    
  

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s ease-in-out, background-color 1s ease;
      }
    
  

コードの説明：

• transition: width 2s ease-in-out, background-color 1s ease: 2つのトランジションを定義していて、1つはプロパティwidthで、持続時間は2秒、タイミング関数はease-in-out、もう1つはプロパティbackground-colorで、持続時間は1秒、タイミング関数はease

4.2 トランジションプロパティ

1. transition-propertyプロパティ

transition-propertyプロパティは、どのプロパティのトランジションを適用するかを決定するよ。

構文：

    
      element {
        transition-property: property1, property2 ...;
      }
    
  

例：

    
      .box {
        transition-property: width, height, background-color;
      }
    
  

2. transition-durationプロパティ

transition-durationプロパティは、トランジションの持続時間を設定するんだ。

構文：

    
      element {
        transition-duration: time;
      }
    
  

例：

    
      .box {
        transition-duration: 2s, 1s, 3s;
      }
    
  

3. transition-timing-functionプロパティ

transition-timing-functionプロパティは、アニメーションが時間の中で変化する速度を定めるよ。

構文：

    
      element {
        transition-timing-function: function;
      }
    
  

例：

    
      .box {
        transition-timing-function: ease-in, linear, ease-out;
      }
    
  

4. transition-delayプロパティ

transition-delayプロパティは、トランジション開始前の遅延を設定するんだ。

構文：

    
      element {
        transition-delay: time;
      }
    
  

例：

    
      .box {
        transition-delay: 1s, 0s, 500ms;
      }
    
  

4.3 トランジションの持続時間

トランジションの持続時間は、プロパティが変化するアニメーションがどれだけの時間続くかを決定する。秒（s）またはミリ秒（ms）で指定されるよ。

例：

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: width 2s, height 1s, background-color 500ms;
      }
    
  

コードの説明：

• transition: width 2s, height 1s, background-color 500ms: widthのトランジションは2秒、heightは1秒、background-colorは500ミリ秒続くよ。

4.4 タイミング関数

タイミング関数は、プロパティの値が時間の中でどのように変化するかを決定する。いろんなアニメーション効果を作ることができるよ。

基本的なタイミング関数：

• ease: アニメーションはゆっくり始まり、途中で速くなり、最後にまたゆっくりになる
• linear: 始めから終わりまで一定の速度でアニメーションする
• ease-in: アニメーションはゆっくり始まり、次第に速くなる
• ease-out: アニメーションは速く始まり、その後ゆっくりになる
• ease-in-out: アニメーションは開始と終了時にゆっくりで、途中で速くなる

例：

    
      .box {
        width: 100px;
        height: 100px;
        background-color: #2ecc71;
        transition: width 2s ease-in-out, height 1s linear, background-color 500ms ease;
      }
    
  

コードの説明：

• ease-in-out: 始めと終わりがゆっくりなスムーズなトランジション
• linear: 一定速度のトランジション
• ease: ゆっくり始まり、途中で速くなり、最後でまたゆっくりなトランジション