Style transition属性

定義と使用方法

transition この属性は、4つの过渡属性のショートカット属性です：

注釈：常に規定してください transitionDuration属性それとも、デフォルトの時間は0であり、过渡は無効です。

も参照してください：

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

例

div要素にマウスをオーバーすると徐々に外観を変更します：

document.getElementById("myDIV").style.transition = "all 2s";

自分で試してみてください

文法

transition属性を返します：

object.style.transition

transition属性を設定します：

object.style.transition = "property duration timing-function delay|initial|inherit"

属性値

値 説明
transitionProperty 过渡効果が対象とするCSS属性の名前を規定します。
transitionDuration 过渡効果が完了するまでの秒数またはミリ秒を規定します。
transitionTimingFunction 过渡効果の速度曲線を規定します。
transitionDelay 过渡効果がどのタイミングで開始するかを定義します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性は、親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： all 0 ease 0
返り値： 文字列で、要素の transition属性。
CSSバージョン： CSS3

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1