[CSS3]transitionのまとメモ

昨夜は会社で寝てました。で起きました。
当然「え？え？え？どこ？いつ？なんじ？」な状態です。下山です。

最近頻繁に使うtransitionまとメモ。

Contents

1 transitionって？
- 1.1 サンプル
- 1.2 transition一括指定

transitionって？

指定したスタイルを別のスタイルへ滑らかに変化されるためのプロパティです。
例えばボタンにオンマウスで滑らかに背景色を変えるとかさ。

サンプル

html


	
		ボタン１
	
	
		ボタン２
	
	
		ボタン３
	
	
		ボタン４
	
	
		ボタン５

CSS

ul.btn li {
	list-style:none;
	float:left;
	margin-right:5px;
}
ul.btn li a {
	display:block;
	padding:10px 20px;
	text-align:center;
	text-decoration:none;
	border:1px solid #ccc;
	color:#fff;
	background:#000;
	-webkit-transition-property:background;
	-webkit-transition-duration:1s;
	-moz-transition-property:background;
	-moz-transition-duration:1s;
	-o-transition-property:background;
	-o-transition-duration:1s;
	transition-property:background;
	transition-duration:1s;
}
ul.btn li a:hover {
	background:#c00;
}

htmlはul liを使用してアンカーを並べているだけ。
CSSで横に並べてli内、aの背景色をhoverで赤に入れ替える。
とごく普通のスタイルですがtransition-propertyとtransition-durationを利用して滑らかに変化するようになります。

transition-property:滑らかに変化させたいプロパティ名;
transition-duration:変化する時間(秒);

こんな感じです。

ボクが日頃使うのはこの程度ですが、他にもtransition-timing-function(変化のパターン)やtransition-delay(遅延処理)もあります。
transition-timing-functionの値は以下の通り

ease /*ゆっくりから加速し減速(初期値)*/
linear /*速度一定*/
ease-in /*ゆっくりからの加速*/
ease-out /*速くからの減速*/
ease-in-out /*ゆっくりから加速、そして減速*/

transition一括指定

で、もちろん一括指定も可能です。
一括指定する場合はtransitionを使用します。

transition:滑らかに変化させたいプロパティ名,変化する時間(秒),遅延処理時間(秒),変化のパターン;

という感じです。

上のコードを一括指定すると

ul.btn2 li {
	list-style:none;
	float:left;
	margin-right:5px;
}
ul.btn2 li a {
	display:block;
	padding:10px 20px;
	text-align:center;
	text-decoration:none;
	border:1px solid #ccc;
	color:#fff;
	background:#000;
	-webkit-transition:background 1s 0 ease;
	-moz-transition:background 1s 0 ease;
	-o-transition:background 1s 0 ease;
	transition:background 1s 0 ease;
}
ul.btn2 li a:hover {
	background:#c00;
}

となります。
demo

で当然のことながらIEは無理っ！(IE10ならOK)