Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

transition-duration

『transition』の『アニメーションにかける時間』を指定できます。

『transition』でまとめて指定するときの『アニメーションにかける時間』は省略できないので、このプロパティを指定する時は、他のプロパティを個別に指定するか、一度『transition』で『アニメーションにかける時間』を指定してその後に『transition-duration』で上書きする必要があります。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので、使用する際はベンダープレフィックスを付けるようにした方が無難です。またPCのスペックによっては動きがカクついてしまう場合がありますのでご注意下さい。

サンプルコード

/* アニメーションにかける時間を『transition-duration』で上書きして1sにしています。 */
transition: 0.1s;
-webkit-transition: 0.1s;
-moz-transition: 0.1s;
-ms-transition: 0.1s;

transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;

ブラウザでの表示結果

div {
	background: #f00;
	width: 200px;
	/* アニメーションにかける時間を『transition-duration』で上書きして1sにしています。 */
	transition: 0.1s;
	-webkit-transition: 0.1s;
	-moz-transition: 0.1s;
	-ms-transition: 0.1s;

	transition-duration: 1s;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-ms-transition-duration: 1s;
}
div:hover {
	width: 300px;
}

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

『transition』の『アニメーションにかける時間』を指定できます。

『transition-duration』の値は『,』で区切る事により複数の『アニメーションにかける時間』を同時に指定できます。

div {
	background: #f00;
	width: 200px;
	height: 100px;
	transition-property:width, height;
	transition-duration: 1s, 2s;
	-webkit-transition-property:width, height;
	-webkit-transition-duration: 1s, 2s;
	-moz-transition-property:width, height;
	-moz-transition-duration: 1s, 2s;
	-ms-transition-property:width, height;
	-ms-transition-duration: 1s, 2s;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

指定されているプロパティの数より『transition-duration』の値が少ない場合は指定した値が繰り返されているものとして適用されます。

div {
	background: #f00;
	width: 200px;
	height: 100px;
	transition-property: width, height, background;
	transition-duration: 1s, 2s;
	-webkit-transition-property:w idth, height, background;
	-webkit-transition-duration: 1s, 2s;
	-moz-transition-property: width, height, background;
	-moz-transition-duration: 1s, 2s;
	-ms-transition-property: width, height, background;
	-ms-transition-duration: 1s, 2s;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

『transition-duration』で指定した値の方が多い場合は指定されているプロパティ数以上の値は無視されます。

div {
	background: #f00;
	width: 200px;
	height: 100px;
	transition-property: width, height, background;
	transition-duration: 1s, 2s, 1s, 3s;
	-webkit-transition-property: width, height, background;
	-webkit-transition-duration: 1s, 2s, 1s, 3s;
	-moz-transition-property: width, height, background;
	-moz-transition-duration: 1s, 2s, 1s, 3s;
	-ms-transition-property: width, height, background;
	-ms-transition-duration: 1s, 2s, 1s, 3s;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ