【CSS】transitionとは何か？いつ使う？何ができる？どっちのセレクタに記述する?開始と終了で変化を変える方法（初心者向け、わかりやすい）

CSSにはtransitionという便利なプロパティがあります。便利なのですが、一方で指定する要素が多く複雑でとっつきにくいという印象があります。

ですが、使い方を覚えてしまえばtransitionはとても簡単で便利なものです。

ここではCSSプロパティtransisionの使い方を実例を踏まえて解説しています。

transitionとは何か？

transitionとは何か？（いつ使うか？どんなことができるか？）

CSSのtransitionとはホバーしたときやチェックボックスをクリックしたときなど、特定の条件でCSSを変化させるときに、変化の仕方を調整することができるプロパティです。

例えばホバーを例に挙げると、ホバーする前の状態を「開始点」、ホバー後の状態を「終了点」としたときに、この開始点と終了点までの間をどう変化させるか？これを指定できるのがtransitionです。

実例

通常のホバー（transitionの設定なし）

例えば、transitionの設定をしていない通常のホバーは、カーソルを乗せた瞬間に色が切り替わります。

transitionを設定

この要素に対してtransitionを設定すると、変化が完了するまでの時間や開始タイミング、変化方法などを指定することができます。

例えば、上記のボタン要素に対して以下のようなCSSを追加します。

transition: background 1.8s ease;

すると、1.8秒かけてジワ～っと色が変化します。

transitionプロパティの基本構文

基本構文

transitionの基本構文は以下のようになっています。

trasnsition: ①cssプロパティ名 ②transition-durationの値 ③transtion-delayの値 ④transition-timing-functionの値 ⑤transition-behaviroの値

ポイントはtransition系の以下の5つのプロパティを一括指定できることです。

コードの記述量も少なくてすむのでかなり便利なのですが、上記の5つのtransition系のプロパティがなんなのかをわかっていないとtransitionもよくわからないということになってしまいます。

それぞれの処理の詳細については下記をご参考ください。

なお、それぞれの中でtransition-propertyも合わせて使う方法を紹介しています。

transition-behaviorはdispalyプロパティのように、本来transitionを設定できない要素に対してtransitionを適用させるためのプロパティです。

初期値

上記の5つのtransition系のプロパティは必ずしも全て記載しなければいけないわけではありません。それぞれ省略することも可能です。その場合は初期値が適用されます。

transition-durationを設定しないことにはアニメーションが発生しないので、transitionの中には必ず1つ以上秒[s]（または秒[ms]）を記述します。

transitionプロパティの注意点

transitionを使うときは以下の点に注意してください。

transition-duration以外は省略できる

transition-durationを省略すると0sが適用されるため実質動きがなくなってしまいます。このため、transition-durationは必須ですが、それ以外は省略することができます。

例えば、いろいろと書くと以下のようになります。

/* プロパティ名 | 再生時間 | イージング関数 | 待ち時間 | ふるまい*/
transition: margin-right 4s ease-in-out 1s normal;

これらは必ず記載しなければいけないわけではなく省略することができます。例えば変化終了までの時間を1秒とすると以下のようになります。

transition: 1s;

　↓↑　同じ

transition: all 1s ease 0 normal;

値は同不順（並べ替えができる）

値は同不順で並べ替えすることができます。

ただし、transition-durationとtransition-delayは必ずこの順番で記載します。これはプログラム側で最初に出てきた秒数をtransition-durationと判定し、次に秒数がでてきたらtransition-delayとするようになっているためです。

transition: margin-right 4s ease-in-out 1s normal;

　↓↑　同じ

transition: ease-in-out 4s normal 1s margin-right;

自由に並べ替えすることができますが、コードの可読性を上げるために、基本的には決まった順番で記述します。

複数のプロパティを指定するときははカンマで区切って別々に記述する

カンマで区切って別々に記述する

transitionプロパティでは変化対象となる複数のプロパティを指定することができますが、プロパティをまとめて指定するのではなく、以下を１つの塊としてカンマで区切って記述します。

①cssプロパティ名 ②transition-durationの値 ③transtion-delayの値 ④transition-timing-functionの値 ⑤transition-behaviroの値

これは、transition-propertyとは異なる点なので注意が必要です。

例えば以下のように記述します。

transition:
  margin-right 4s,
  color 1s;

transition-propertyの場合

transition-propertyでは、カンマでつないで複数のプロパティを指定できましたが、transitionではこの指定方法は使えないということです。

transition-property: 変化させるプロパティ1, 変化させるプロパティ2,,,,;

それぞれに変化させる内容を変える場合は以下のように記述します。（例：transition-delayの場合）

transition-delay: 秒As, 秒Bs,,,,;
transition-property: プロパティA, プロパティB,,,,;

どっちのセレクタに設定するか？「開始→終了」と「終了→開始」の秒数を変える方法

セレクタと変化後のセレクタのどっちにtransitionプロパティを設定すればいいか？と迷う人もいるかと思います。

基本的には、変化前のセレクタに設定します。

例えば、ホバーで変化する要素の場合は:hoverがない方に記述します。なぜなら、どちらに記述するかによって動きに変化が発生するためです。

変化前のセレクタに設定する（開始⇔終了が同じ時間で変化）

通常の使い方である変化前のセレクタに設定した場合、「開始 ⇔ 終了」のどちらもに同じ時間が適用されます。

例えば、:hoverがない方のセレクタに以下を設定します。

すると、「開始 ⇔ 終了」のどちらもが１秒かけて変化します。

transition: all 1.5s;

▼コードの全体像

  <section>
    <style>
      .c-btn {
        background: blue;
        color: #fff;
        display: block;
        font-weight: bold;
        max-width: 100px;
        margin: 10px 0;
        padding: 15px 40px;
        text-align: center;
        transition: all 1.5s;   
      }
      
     .c-btn:hover{
        background: red;
        max-width:  100%;
      }

      
      .ease-in-out{
        transition-timing-function: ease-in-out;
      }
      
      section{
        height: 100px;
      }
    </style>

    
    <div class="c-btn ease-in-out">ease-in-out</div>
    
    
  </section>

変化後のセレクタに設定する（開始→終了のみ変化）

変化後のセレクタに設定した場合、「開始→終了」のみに変化が適用されます。

例えば、:hoverがある方のセレクタに以下を設定します。

transition: all 1.5s;   

すると、「開始→終了」のみが1秒かけて変化します。「終了→開始」はスッと戻ります。

▼コードの全体像

  <section>
    <style>
      .c-btn {
        background: blue;
        color: #fff;
        display: block;
        font-weight: bold;
        max-width: 100px;
        margin: 10px 0;
        padding: 15px 40px;
        text-align: center;
        
      }
      
     .c-btn:hover{
        background: red;
        max-width:  100%;
        transition: all 1.5s;
      }

      
      .ease-in-out{
        transition-timing-function: ease-in-out;
      }
      
      section{
        height: 100px;
      }
    </style>

    
    <div class="c-btn ease-in-out">ease-in-out</div>
    
    
  </section>

「開始→終了」と「終了→開始」の時間を変化させる

なお、「開始→終了」と「終了→開始」の時間を変化させたい場合は、変化前と変化後のセレクタの両方にtransitionプロパティを設定します。

例えば、ホバー時は0.5秒後に少しだけ遅れて変化し、ホバーを外すときは1.5秒遅れて変化する場合は以下のように記述します。

  <section>
    <style>
      .c-btn {
        background: blue;
        color: #fff;
        display: block;
        font-weight: bold;
        max-width: 100px;
        margin: 10px 0;
        padding: 15px 40px;
        text-align: center;
        transition: all 1.5s;
        
        
      }
      
     .c-btn:hover{
        background: red;
        max-width:  100%;
        transition: all 0.5s;
      }

      
      .ease-in-out{
        transition-timing-function: ease-in-out;
      }
      
      section{
        height: 100px;
      }
    </style>

    
    <div class="c-btn ease-in-out">ease-in-out</div>
    
    
  </section>

ご参考

transition関連のプロパティの使い方は下記をご参考ください。