CSS3トランジション-propertyプロパティ
例
div要素の上にマウスを移動し、徐々にテーブルの幅を変更します。
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;}
{
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;}
»をお試しください
より多くの例については、このページの下で。
ブラウザのサポート
表中の数字は、プロパティのバージョン番号をサポートする最初のブラウザを表します。
すぐにデジタル-webkit-を以下、-ms-またはプレフィックスのサポートに前-moz-は最初のブラウザのバージョン番号を属性。
| 属性 | |||||
|---|---|---|---|---|---|
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
属性の定義と指示
遷移property属性は、（指定したCSSプロパティの変更トランジション効果を開始します）CSSプロパティのnametransition効果を指定します。
ヒント：ユーザーが要素の上に置いたときにトランジション効果は、通常発生します。
注：必ず、0のそれ以外の期間を遷移期間のプロパティを指定して、トランジションの効果はありません。
| デフォルト： | すべて |
|---|---|
| 継承： | いいえ |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | オブジェクト.style.transitionProperty = "幅、高さ" |
文法
transition-property: none|all|
property;
| 値 | 説明 |
|---|---|
| なし | いいえプロパティは、トランジションを取得していません。 |
| すべて | すべてのプロパティは、トランジション効果を受け取ることになります。 |
| プロパティ | 定義は、カンマで区切られたトランジション効果のCSSプロパティ名のリストを、適用します。 |
より多くの例
トランジション効果は-両方のプロパティを変更するには
div要素の上にマウスを移動、滑らかなトランジション効果と幅と高さを変更します。
