[CSS3]transitionのまとメモ

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

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

transitionって？

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

サンプル

html

<ul class="btn">
	<li>
		<a href="#">ボタン１</a>
	</li>
	<li>
		<a href="#">ボタン２</a>
	</li>
	<li>
		<a href="#">ボタン３</a>
	</li>
	<li>
		<a href="#">ボタン４</a>
	</li>
	<li>
		<a href="#">ボタン５</a>
	</li>
</ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

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;
}

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:変化する時間(秒);

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

こんな感じです。

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

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

ease /*ゆっくりから加速し減速(初期値)*/

linear /*速度一定*/

ease-in /*ゆっくりからの加速*/

ease-out /*速くからの減速*/

ease-in-out /*ゆっくりから加速、そして減速*/

transition一括指定

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

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

1	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;
}