CSS トランジション

CSS トランジション

CSSトランジションは、指定された時間内に属性値を滑らかに変更することができます。

この要素にマウスを合わせて、CSSトランジション効果を確認してください：

CSS

この章では、以下の属性について学びます：

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

トランジションのブラウザサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザバージョンを示しています。

属性 Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

CSSトランジションの使い方

トランジション効果を作成するには、以下の2つのことを明確にする必要があります：

  • 効果を追加したいCSS属性
  • 効果の持続時間

注意：指定されていない場合、デフォルトの値が0であるため、トランジション効果は有効ではありません。

以下の例では、100px * 100pxの赤色の<div>要素を示しています。<div>要素はwidth属性にトランジション効果も指定しており、持続時間は2秒です：

例

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

指定されたCSS属性（width）の値が変更された場合、トランジション効果が開始されます。

今、width属性にマウスオーバー時に新しい値を指定しましょう：

例

div:hover {
  width: 300px;
}

実際に試してみてください

注意事項：光標が要素から外れたとき、徐々に元のスタイルに戻ります。

いくつかの属性値を変更します

以下の例では、width は 2 秒、height は 4 秒で、width と height にトランジション効果が追加されています：

例

div {
  transition: width 2s, height 4s;
}

実際に試してみてください

トランジションの速度曲線を指定します

transition-timing-function 属性は、トランジション効果の速度曲線を定義します。

transition-timing-function 属性は以下の値を受け入れます：

  • ease - 開始が遅く、加速し、最後に遅くなるトランジション効果を定義します（デフォルト）
  • linear - 開始から終了まで速度が同じトランジション効果を定義します
  • ease-in - 開始が遅いトランジション効果を定義します
  • ease-out - 終了が遅いトランジション効果を定義します
  • ease-in-out - 開始と終了が遅いトランジション効果を定義します
  • cubic-bezier(n,n,n,n) - 三次ベ塞尔関数で自分で値を定義できます

以下の例では、使用できるさまざまな速度曲線を示しています：

例

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

実際に試してみてください

遅延トランジション効果

transition-delay 属性は、トランジション効果の遅延（秒で指定）を定義します。

以下の例では、開始前に 1 秒の遅延があります：

例

div {
  transition-delay: 1s;
}

実際に試してみてください

トランジション + 転換

以下の例では、トランジション効果を追加しています：

例

div {
  transition: width 2s, height 2s, transform 2s;
}

実際に試してみてください

更多トランジション例

以下のように、CSS トランジション属性を一一指定できます：

例

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

実際に試してみてください

または短縮形式を使用して transition 属性：

例

div {
  transition: width 2s linear 1s;
}

実際に試してみてください

CSS トランジション属性

以下の表にすべての CSS トランジション属性が示されています：

属性 説明
transition 4つのトランジション属性を1つの属性に設定するために使用されるショートカット属性。
transition-delay トランジション効果の遅延（秒で計算）を定義します。
transition-duration トランジション効果が持続する秒数またはミリ秒を定義します。
transition-property トランジション効果が対象とする CSS プロパティの名前を定義します。
transition-timing-function トランジション効果の速度曲線を定義します。