CSS3 transition-property プロパティ
 完全な CSS3 リファレンス
例
Hover over a div element, and change the width with a smooth transition effect:
div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}
div:hover {width:300px;} |
Try it yourself »
More examples at the bottom of this page.
|
ブラウザ・サポート
transition-property property is not supported in any browsers.
Firefox 4 supports an alternative, the -moz-transition-property property.
Safari and Chrome support an alternative, the -webkit-transition-property property.
Opera support an alternative, the -o-transition-property property.
定義と用法
transition-property property specifies the name of the CSS property the transition
effect is for (the transition effect will start when the specified CSS property
changes).
チップ: A transition effect could typically occur when a user hover over an
element.
注: Always specify the transition-duration property, otherwise the duration
is 0, and the transition will have no effect.
| デフォルト値: |
all |
| 継承: |
no |
| バージョン: |
CSS3 |
| JavaScript構文: |
object.style.transitionProperty="width,height" |
構文
| transition-property: none|all|property; |
| 値 |
説明 |
| none |
No property will get a transition effect |
| all |
All properties will get a transition effect |
| property |
Defines a comma separated list of CSS property names the transition
effect is for |
 |
Try it Yourself - Examples |
Transition effect - change two properties
Hover over a div element, and change the width AND height with a smooth
transition effect.
完全な CSS3 リファレンス
|