transition

transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;

上記のプロパティは半角スペースで区切る事により『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;
}

『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>