CSS3 トランジションを使用すると、指定した時間の間、（一つの値から別の値へ）スムーズに プロパティ値を変更することができます。
例： 下の要素の上にマウスを乗せて、CSS3 トランジション効果をご覧ください
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
数字の後に続く -webkit-、-moz- または -o- は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
トランジション効果を作成するには、2つのことを指定しなければなりません：
注: 持続時間を指定しない場合、トランジションのデフォルト値が 0 であるため、効果がありません。
次の例は、100px * 100px の赤い <div> 要素を表示します。 <div> 要素にはまた、持続時間を 2秒に width プロパティのトランジション効果を指定しています：
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
指定した CSS プロパティ (width) の値が変化した時に、トランジション効果が始まります。
今、<div> の上にマウスを乗せた時に、width プロパティへ新しい値を指定します：
要素からマウス・カーソルを外すと、徐々に元のスタイルに戻ることに注意してください。
次の例は、 width と height プロパティ双方に対してトランジション効果を追加します。変化に要する時間は、幅に 2秒、高さには 4秒かかります：
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Try it Yourself ❯
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;}
Try it Yourself ❯
transition-delay プロパティは、トランジション効果の遅延を（秒で）指定します。
次の例は、1 秒間遅れてスタートします。
次の例は、トランジション効果に変形も加えます：
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
}
Try it Yourself ❯
CSS3 トランジション・プロパティは、次のように 1 つずつ指定することができます：
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Try it Yourself ❯
または、ショートハンドプロパティ transition を使用することもできます：
Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯ Exercise 5 ❯
次の表は、トランジション・プロパティの一覧です：
| プロパティ | 説明 |
|---|---|
| transition | 1 つプロパティで 4 つの transition プロパティを設定するためのショートハンド・プロパティ |
| transition-delay | トランジション効果が遅延を（秒で）指定する |
| transition-duration | トランジション効果を完了するまでにかかる時間を秒数またはミリ秒で指定する |
| transition-property | トランジションが適用される CSS プロパティの名前を指定する |
| transition-timing-function | トランジション効果の速度曲線を指定する |