最新のWeb開発のチュートリアル
 

Style transition Property

<スタイルオブジェクト

徐々にその外観を変更するdiv要素の上にマウスを移動:

document.getElementById("myDIV").style.transition = "all 2s";
»それを自分で試してみてください

定義と使用法

遷移プロパティは、4つの遷移特性の短縮形プロパティです。

transitionProperty、transitionDuration、transitionTimingFunction、およびtransitionDelay。

Note:必ずtransitionDurationプロパティを指定し、それ以外の期間は0で、かつ遷移が効果がありません。


ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

遷移プロパティは、Internet Explorer 10、Firefoxの、オペラ座、Chromeでサポートされています。

Safariは、代替、WebkitTransitionプロパティをサポートしています。

注意:移行プロパティは、Internet Explorer 9およびそれ以前のバージョンではサポートされていません。

構文

遷移プロパティを返します:

object .style.transition

トランジションプロパティを設定します。

object .style.transition=" プロパティ値
説明
transitionProperty トランジション効果があるため、CSSプロパティの名前を指定します。
transitionDuration トランジションエフェクトが完了するまでの秒数またはミリ秒を指定します
transitionTimingFunction トランジションエフェクトの速度曲線を指定します。
transitionDelay トランジションエフェクトが開始される時に定義します
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

デフォルト値: すべて0やす0
戻り値: 要素の遷移プロパティを表す文字列、
CSSのバージョン CSS3

関連ページ

CSSリファレンス: transition property


<スタイルオブジェクト