CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS3 transition-timing-function 属性 CSS3 transition-duration 属性

CSS3 transition-property属性の使用方法及び例

transition-propertyCSS属性は、トランジション効果を適用するべきCSS属性の名前を指定します。

以下のテーブルは、この属性の使用法とバージョン履歴、およびJavaScriptスクリプトでのこの属性の使用法を示しています。

デフォルト値：	all
適用範囲：	すべての要素::beforeと::after 偽要素
継承：	ありません
アニメーション可能：	いいえ。参照してください：アニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object.style.transitionProperty="width,height"

transition-propertyの使用構文

この属性の構文は以下の通りです：

transition-property:　　[,　,　...　]　|　none　|　all　|　initial　|　inherit
　where　　is　a　CSS　property　name

以下の例では、transitionの使用方法を示しています。-property属性。

例

button　{
　　　　background:　#fd7c2a;
　　　　/*　For　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

テストして見て‹/›

属性値

以下のテーブルは、この属性の値を説明しています。

値	説明
none	属性がトランジション効果を受けません。
all	すべての属性にトランジション効果が適用されます。これはデフォルト値です。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のtransitionを使用します。-propertyの属性値。

ブラウザ互換性

transition-property属性のブラウザの互換性、以下のテーブルの数字は、この属性をサポートするブラウザの最低バージョン番号を示します；すべての主要ブラウザはこの属性をサポートしています。

	Firefox 4+ ^-moz-、16 + Google Chrome 4+ ^-webkit-、26 + Internet Explorer 10+ Apple Safari 3。1+ ^-webkit-、6。1+ Opera 10。5+ ^-o-、12。1+

さらに詳しく

以下のチュートリアルを参照してください：CSS3 Transitions。

CSS3 transition-timing-function 属性 CSS3 transition-duration 属性