<div> 要素にカーソルをのせると、フォームの幅が 100px から 300px まで徐々に変化します：
div
{
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
Try it Yourself ❯
他の "Try it Yourself" 例が下にあります。
プロパティは、次の 4 つの transition プロパティのためのショートハンド・プロパティです：
transition-property、 transition-duration、 transition-timing-function、 transition-delay。
注: 常に transition-duration プロパティを指定します。指定しない場合は、所要時間が 0s となり transition（遷移）の効果は無効になります。
| デフォルト値： | all 0s ease 0s |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.transition="all 2s" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
-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: property duration timing-function delay|initial|inherit;
| 値 | 説明 |
|---|---|
| transition-property | トランジション効果に対するCSSプロパティの名前を指定します |
| transition-duration | トランジション効果が完了するまでにかかる秒数またはミリ秒を指定します | complete
| transition-timing-function | トランジション効果の速度曲線を指定します |
| transition-delay | トランジション効果が何時始まるかを定義します |
| initial | プロパティにデフォルト値を設定します。initial を参照 |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
<input type="text"> がフォーカスされた時に、幅が 100px から 250px へ徐々に変化します：
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out, width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Try it Yourself ❯
CSS チュートリアル： CSS3 Transitions
HTML DOM リファレンス：transition プロパティ