例
徐々にその幅と高さを変更するにはdiv要素の上にマウスを移動:
document.getElementById("myDIV").style.transitionProperty = "width,height";
»それを自分で試してみてください 定義と使用法
transitionPropertyプロパティは、トランジション効果があるため、CSSプロパティの名前を指定します(トランジション効果は時に指定されたCSSプロパティの変更を開始します)。
Tip:ユーザーが要素にカーソルを合わせたときにトランジション効果は、典型的には、発生する可能性があります。
Note:必ずtransitionDurationプロパティを指定し、それ以外の期間は0で、かつ遷移が効果がありません。
ブラウザのサポート
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
<スタイルオブジェクト