【CSS】文字や背景色をやわらかく変化させる方法

テキストリンクにカーソルを合わせると、色を変化させる効果を使ったページは
よく見かけますが、これをCSSだけで色をやわらかく変化させる方法を紹介します。

文字の色をゆっくり変化させる

HTML

<a href="./">ゆっくり変化するテスト</a>

CSS

a {
	color: #ccc;
	text-decoration: none;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}
a:hover {
	color: #0000cc;
}

ゆっくり変化するテスト

マウスカーソルを置くと、灰色から濃い青へとふんわり変化していきます。

背景色をゆっくり変化させる

HTML

<a href="./">ゆっくり変化するテスト</a>

CSS

a {
	padding: 4px;
	background: #ccc;
	color: #fff;
	text-decoration: none;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}
a:hover {
    background: #0000cc;
}

ゆっくり変化するテスト

カーソルを置くと背景色が灰色から濃い青へと徐々に変化していきます。

ちょっとしたエフェクトですが取り入れることで印象が変わりますね。
※IEでは10以上で対応しています。