CSS3 transition-duration属性の使用方法と例

transition-duration CSS属性は、过渡アニメーションが完了するまでに必要な秒数またはミリ秒数を指定します。

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

transition-durationの使用構文

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

transition-duration:　time　|　initial　|　inherit

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

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;
}

属性値

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

ブラウザの互換性

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

さらに詳しく

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

関連属性：transition、transition-delay、transition-property、transition-timing-function。