スタイルtransitionPropertyプロパティ
例
div要素にカーソルを合わせると、幅と高さが徐々に変化します。
document.getElementById("myDIV").style.transitionProperty = "width,height";
定義と使用法
transitionPropertyプロパティは、遷移効果の対象となるCSSプロパティの名前を指定します(指定されたCSSプロパティが変更されると、遷移効果が開始されます)。
ヒント:遷移効果は通常、ユーザーが要素にカーソルを合わせたときに発生する可能性があります。
注:常にtransitionDurationプロパティを指定してください。指定しない場合、期間は0になり、遷移は効果がありません。
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
transitionProperty | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransitionProperty |
12.1 |
構文
transitionPropertyプロパティを返します。
object.style.transitionProperty
transitionPropertyプロパティを設定します。
object.style.transitionProperty = "none|all|property|initial|inherit"
プロパティ値
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
デフォルト値: | 全て |
---|---|
戻り値: | 要素の遷移プロパティプロパティを表す文字列 |
CSSバージョン | CSS3 |
関連ページ
CSSリファレンス:transition-propertyプロパティ
❮スタイルオブジェクト