CSS transition 属性

定義と使用方法

transition 属性は、4つの过渡属性を設定するショートカット属性です：

注釈：常に設定してください transition-duration 属性が設定されていない場合、デフォルトで 0 とされ、过渡効果は発生しません。

も参照してください：

CSS 教程：CSS 过渡

HTML DOM リファレンスマニュアル：transition 属性

例

マウスカーソルを div 要素に合わせると、幅が 100px から 300px に徐々に広がります：

div {
  width: 100px;
  transition: width 2s;
}

実際に試してみる

CSS 语法

transition: property duration timing-function delay;

属性値

値 説明
transition-property 过渡効果を設定する CSS 属性の名前を指定します。
transition-duration 过渡効果を完了するために必要な秒数またはミリ秒を指定します。
transition-timing-function 速度効果の速度曲線を指定します。
transition-delay 过渡効果がいつ始まるかを定義します。

技術的詳細

デフォルト値： all 0 ease 0
継承性： no
バージョン： CSS3
JavaScript 语法： object.style.transition="width 2s"

ブラウザのサポート

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

数字に -webkit-、-moz- または -o- が付いているのは、プレフィックスを使用する最初のバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-