transition

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

プロパティ一覧	初期値	概要
transition-property	all	効果を適用させたいプロパティを個別に指定します。
transition-duration	-	アニメーションにかける時間を指定します。
transition-delay	0s	イベント開始からアニメーションが始まる時間を指定します。
transition-timing-function	ease	アニメーションの変化のタイミングや進行割合を指定します。

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

※ バージョン情報は MDN / Can I Use に基づいています。

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