Template Style

transition プロパティで変化させるプロパティや時間、タイミングを指定します。

transition: [プロパティ] [時間] [タイミング]

例

TRANSITION TEST

.Test a {
	color: #0000FF;
	transition: color 1s ease-in-out;
}
.Test a:hover {
	color: #FF0000;
}

プロパティ (transition-property)

値を変化させたいプロパティを指定します。背景色を変化させたい場合は "background-color" と指定します。

時間 (transition-duration)

変化をする時間を指定します。1秒間かけて変化させる場合は "1s" と指定します。初期値は 0 です。

タイミング (transition-timing-function)

変化量を制御する方法を指定します。制御する方法には linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier があります。初期値は ease です。

複数プロパティの変化を指定する

複数のプロパティを同時に変化させるには、[プロパティ] [時間] [タイミング] の値をカンマ区切りでつないで指定します。

transition: [プロパティ] [時間] [タイミング], [プロパティ] [時間] [タイミング]...

ブラウザの対応状況

CSS 3 の機能とはいえ、Opera 10.5 以外のブラウザではそのまま利用できない状況です。しかし、Webkit 系ブラウザ (Safari や Google Chrome など) では -webkit-transition を、Gecko 系ブラウザ (Firefox など) では -moz-transition とベンダープレフィックスをつけることで利用することができます。Trident 系ブラウザ (Internet Explorer など) はもちろん使えません！