transition-duration プロパティ
transition-duration プロパティは、CSS アニメーションが完了するまでの時間を指定するプロパティです。
値は秒数（s）またはミリ秒（ms）で指定します。
transition-duration は、:hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな CSS アニメーションにすることができる transition のプロパティです。
transition-property: background;
transition-duration: 5s;
transition-timing-function: ease-in-out;
詳しくは「Example」を参照してください。
transition-duration が機能するには、CSS アニメーション化するプロパティを transition-property で指定する必要があります。
CSS アニメーションとして動作させるには、transition-timing-functionも必要でしょう。
似たプロパティでanimationプロパティを使う方法があります。
エレメントに動きを与えますが、CSS Animationが機能するCSSプロパティのみです。
ページ内 Index
構文(Syntax)
CSS
transition-duration: time | initial | inherit;
DOM ( JavaScript )
String = object.style.transitionDuration;
object.style.transitionDuration="time | initial | inherit";
値（Values）
| Value | 摘要 |
|---|---|
| 0s | 初期値（default値） |
| time | 秒数（s）またはミリ秒（ms） |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | 0s |
| 継承（Inherited） | No |
| CSS Animation | No |
Example
transition-durationの例です。 transition-propertyで指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。
マウスをエレメントに乗せてから１秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと１秒後に戻るアニメーションが始まります。
transition-durationによってCSSアニメーションによる変化時間を指定します。
transitionプロパティで一括指定する方法もあります。
関連プロパティ
以下の関連するプロパティがあります。 transition-propertyでアニメーション効果を与えるCSSプロパティを指定します。 transition-*プロパティを使ったCSSアニメーションでは以下のプロパティを使った方がよいでしょう。
| transition | 以下のプロパティを一括指定 |
| transition-property | 動きを与えるCSSプロパティを指定 |
| transition-delay | CSSアニメーションの始まるまでの時間 |
| transition-duration | CSSアニメーションの動作にかかる時間 |
| transition-timing-function | CSSアニメーションの動き方 |