こんにちは（・∀・）
今回はCSS3のtransitionプロパティを使ってできる効果をまとめましたのでそれらサンプルをご紹介いたします。
1. テキストリンクの文字色を変更
マウスオーバー・マウスアウトでテキストリンクの文字色をゆっくりスムースに変更させます。
サンプル
こんにちは！Webデザインラボです。
*ページの読み込みが終わってからお試しください。
HTML
<p class="demo1">こんにちは！<a href="/">Webデザインラボ</a>です。</p>
CSS
.demo1 a {
color: #4776AF;
transition: 0.5s;
}
.demo1 a:hover {
color: #d577ab;
}
テキストリンクの文字色をマウスオーバー・マウスアウトでゆっくり変更させてますが、テキストだとわかりづらいかもしれません。しかしボタンにすると…
2. リンクボタンの色を変更
マウスオーバー・マウスアウトでリンクボタンの色をスムースに変更させます。
サンプル
HTML
<p class="demo2">
<a href="#">button</a>
<a href="#">button</a>
<a href="#">button</a>
<a href="#">button</a>
</p>
CSS
.demo2 a {
margin-right: 5px;
padding: 5px;
color: #fff;
background: #9fb7d4;
transition: 0.5s;
}
.demo2 a:hover {
background: #afc6e2;
}
ボタンにするとわかりやすいですね。マウスオーバー・マウスアウトでボタンの色がスムースに変更しました。
3. ボタンのサイズを変更
マウスオーバー・マウスアウトでボタンのサイズをスムースに変更させます。
サンプル
HTML
<p class="demo3">
<a href="#">button</a>
<a href="#">button</a>
<a href="#">button</a>
<a href="#">button</a>
</p>
CSS
.demo3 {
height: 50px;
}
.demo3 a {
display: inline-block;
margin-right: 5px;
padding: 5px;
color: #fff;
background: #9fb7d4;
transition: 0.5s;
}
.demo3 a:hover {
padding: 10px;
}
マウスオーバー・マウスアウトでボタンのサイズがスムースに変更します。親要素でサイズが変更する分のマージンを取らないと、サイズを変更するボタン要素以外も影響を受けますので注意が必要です。
4. ボタンのサイズを変更
マウスオーバー・マウスアウトでボタンのサイズをスムースに、他の要素に影響を与えることなく変更させます。
サンプル
HTML
<p class="demo4">
<a href="#">button</a>
<a href="#">button</a>
<a href="#">button</a>
<a href="#">button</a>
</p>
CSS
.demo4 a {
display: inline-block;
margin-right: 5px;
padding: 5px;
color: #fff;
background: #9fb7d4;
transition: 0.5s;
}
.demo4 a:hover {
transform: scale(1.2,1.2);
}
hoverした時にpaddingでサイズを変更していたのをscaleにしたことで、他の要素に影響を及ぼさなくなりました。
今まではフラッシュやJavaScript等を使って実現していた動きの効果もCSS3のtransitionプロパティを使えばフラッシュやJavaScriptなしで実現することができます。