Caution

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

CSSプロパティ辞典

transition

transition』プロパティを指定すると『擬似クラス』やJavaScriptによるデザイン変化時にアニメーション(時間による変化)が入るようになります。

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

『transition』が対応していないブラウザでは時間による変化が行われず、通常通り(アニメーションなし)の変化が行われます。

サンプルコード
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
指定可能プロパティ一覧
プロパティ一覧初期値概要
transition-propertyall効果を適応させたいプロパティを個別に指定します。
transition-duration-アニメーションにかける時間を指定します。
transition-delay0sイベント開始からアニメーションが始まる時間を指定します。
transition-timing-functioneaseアニメーションの変化のタイミングや進行割合を指定します。

上記のプロパティは半角スペースで区切る事により『transition』プロパティでまとめて記述することができます。指定の順番は

  1. 『アニメーションさせたいプロパティ』(transition-property)
  2. 『アニメーションにかける時間』(transition-duration)
  3. 『アクションを起こしてからアニメーションが始まるまでの待ち時間』(transition-delay)
  4. 『アニメーションのタイミングや進行割合』(transition-timing-function)

になり『アニメーションにかける時間』の値以外は省略可能です。省略した時は初期値が指定されているものとして扱われます。

以下は日本語で記述したサンプルです。

div {
	transition: アニメーションさせたいプロパティ(省略可) アニメーションにかける時間 イベント開始からアニメーションが始まるまでの待ち時間(省略可) アニメーションのタイミングや進行割合(省略可);
	-webkit-transition: アニメーションさせたいプロパティ(省略可) アニメーションにかける時間 イベント開始からアニメーションが始まるまでの待ち時間(省略可) アニメーションのタイミングや進行割合(省略可);
	-moz-transition: アニメーションさせたいプロパティ(省略可) アニメーションにかける時間 イベント開始からアニメーションが始まるまでの待ち時間(省略可) アニメーションのタイミングや進行割合(省略可);
	-ms-transition: アニメーションさせたいプロパティ(省略可) アニメーションにかける時間 イベント開始からアニメーションが始まるまでの待ち時間(省略可) アニメーションのタイミングや進行割合(省略可);
}
ブラウザでの表示結果
div {
	background: #f00;
	width: 200px;

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

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

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

概要

『transition』プロパティを指定すると『擬似クラス』やJavaScriptによるデザイン変化時にアニメーション(時間による変化)が入るようになります。

以下は個別のプロパティをまとめて指定したサンプルです。『アニメーションさせたいプロパティ』に『width』を指定しているので『background』には適用されません。『アニメーションが始まるまでの待ち時間』に『1s』を指定しているのでイベント開始からアニメーションするまでに1秒のラグが発生します。『アニメーションのタイミング』に『ease-in』を指定してアニメーションの動きを変更しています。

div {
	background: #f00;
	width: 200px;

	transition: width 0.5s 1s ease-in;
	-webkit-transition: width 0.5s 1s ease-in;
	-moz-transition: width 0.5s 1s ease-in;
	-ms-transition: width 0.5s 1s ease-in;
}
div:hover {
	width: 300px;
	background: #ff0;
}

『アニメーションさせたいプロパティ』は『,』を使って区切ることで、複数のプロパティを指定する事ができます。複数項目をまとめて指定するときは、『アクションを起こしてからアニメーションが始まるまでの待ち時間』などの他の値もそれぞれ指定する必要がありますのでご注意下さい。

div {
	background: #f00;
	width: 200px;
	height: 100px;

	transition: width 0.5s ease-in, height 0.5s 1s ease-in;
	-webkit-transition: width 0.5s ease-in, height 0.5s 1s ease-in;
	-moz-transition: width 0.5s ease-in, height 0.5s 1s ease-in;
	-ms-transition: width 0.5s ease-in, height 0.5s 1s ease-in;
}
div:hover {
	width: 300px;
	height: 200px;
	background: #ff0;
}

『transition』関係のプロパティはイベント開始前の要素に指定する必要があり、イベント完了後(『hover』等)に指定すると動作が思っているものと違ってしまうので注意してください。

今までのサンプルはすべてcssでしたが、JavaScriptでデザイン変更を行った場合でもアニメーションが入るようになります。
スマートフォンに関しましては『擬似クラス』等のイベントだけで使用するより、JavaScriptの『タッチ』や『フリック』等のイベントで使用することが多くなると思います。

div {
	background: #f00;
	width: 200px;

	transition: 0.5s ease-in;
	-webkit-transition: 0.5s ease-in;
	-moz-transition: 0.5s ease-in;
	-ms-transition: 0.5s ease-in;
}

<script>
	window.addEventListener("load", function(){
		var elem = document.getElementById("test");
		if(elem){
			elem.addEventListener("mouseover", function(){
				this.style.width = "300px";
			}, false);
		}
	}, false);
</script>
<p>要素にマウスホバーすると『width』が300pxに変更されます。cssの擬似クラスと違い『width』を300pxに変更しているので、元の200pxには戻りません。戻したい場合は戻す処理もJavaScriptで構築する必要があります。</p>
<div id="test">マウスホバーすると横幅が300pxに変更されます。</div>

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