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

Style transitionProperty Property

<スタイルオブジェクト

徐々にその幅と高さを変更するにはdiv要素の上にマウスを移動:

document.getElementById("myDIV").style.transitionProperty = "width,height";
»それを自分で試してみてください

定義と使用法

transitionPropertyプロパティは、トランジション効果があるため、CSSプロパティの名前を指定します(トランジション効果は時に指定されたCSSプロパティの変更を開始します)。

Tip:ユーザーが要素にカーソルを合わせたときにトランジション効果は、典型的には、発生する可能性があります。

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


ブラウザのサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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

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


構文

transitionPropertyプロパティを返します:

object .style.transitionProperty

transitionPropertyプロパティを設定します。

object .style.transitionProperty="none|all| プロパティ値
説明
none いいえプロパティは、トランジション効果を得るません
all デフォルト値。 すべてのプロパティは、トランジション効果を取得します
property トランジション効果があるため、CSSプロパティ名のカンマ区切りリストを定義します
initial このプロパティがデフォルト値に設定します。 最初の記事を読みます
inherit その親要素からこのプロパティを継承します。 継承についての記事を読みます

技術的な詳細

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

関連ページ

CSSリファレンス: transition-property property


<スタイルオブジェクト