transition プロパティ

　transition プロパティは、CSS アニメーションを簡易に定義する CSS のプロパティです。
　:hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな CSS アニメーションにすることができます。

　transitionプロパティはtransition-property、transition-duration、transition-timing-function、transition-delayプロパティの機能を一括して定義できます。

　基本的には、以下のように CSS アニメーション化したい CSS プロパティを指定します。ここでは background, width, height プロパティに関する変化を任意の動きに指定しています。

div.example {
	background-color: green; width:300px; height:300px;
	transition: background,width,height 5s ease-in-out 1s;
}

div.example:hover {
	background-color:yellow; width:100px; height:100px;
}

　transition プロパティは、CSS アニメーション化したいプロパティと動作時間、動き方、開始までの待ち時間を指定します。

　似たプロパティに、animation プロパティがあります。より詳細で、疑似クラスによるスタイルの変化を伴わない場合は animation プロパティを利用します。
　:hover や :focus といった疑似クラスによるスタイルの変更を、滑らかな動きにしたい場合は transition プロパティの方がより簡易にできます。

　注意点としては、transition プロパティは、エレメントに動きを与えますが、CSSアニメーションが機能するCSSプロパティのみに有効です。