備忘録的プログラミングリファレンス

transition-duration プロパティ

 transition-duration プロパティは、CSS アニメーションが完了するまでの時間を指定するプロパティです。 値は秒数(s)またはミリ秒(ms)で指定します。
 transition-duration は、:hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな CSS アニメーションにすることができる transition のプロパティです。

transition-duration プロパティ
transition-property: background;
transition-duration: 5s;
transition-timing-function: ease-in-out;

 transition-duration が機能するには、CSS アニメーション化するプロパティを transition-property で指定する必要があります。

 CSS アニメーションとして動作させるには、transition-timing-functionも必要でしょう。

関連プロパティ

 以下の関連するプロパティがあります。 transition-propertyでアニメーション効果を与えるCSSプロパティを指定します。 transition-*プロパティを使ったCSSアニメーションでは以下のプロパティを使った方がよいでしょう。

transition以下のプロパティを一括指定
transition-property動きを与えるCSSプロパティを指定
transition-delayCSSアニメーションの始まるまでの時間
transition-timing-functionCSSアニメーションの動き方

 似たプロパティでanimationプロパティを使う方法があります。

 エレメントに動きを与えますが、CSS Animationが機能するCSSプロパティのみです。

構文(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 AnimationNo

Example

 transition-durationの例です。 transition-propertyで指定されたCSSプロパティがCSSアニメーションの対象です。ここでは、back-shadowプロパティです。

 マウスをエレメントに乗せてから1秒後にCSSアニメーションが始まります。 さらに、マウスをエレメントから離すと1秒後に戻るアニメーションが始まります。

 transition-durationによってCSSアニメーションによる変化時間を指定します。

 transitionプロパティで一括指定する方法もあります。