CSS3のみで実現できるアニメーション効果のあるホバーエフェクト

davidwalsh.nameより、CSS3のみで実現できるアニメーション効果のあるホバーエフェクトの紹介です。

デモページはコチラから

ソースコードは下記のようになっています。

.cpojer-links a{
	display: inline-block;
	padding: 4px;
	outline: 0;
	color: #3a599d;
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	-o-transition-duration: 0.25s;
	transition-duration: 0.25s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
	-webkit-transform: scale(1) rotate(0);
	-moz-transform: scale(1) rotate(0);
	-o-transform: scale(1) rotate(0);
	transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
	background: #3a599d;
	text-decoration: none;
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-transform: scale(1.05) rotate(-1deg);
	-moz-transform: scale(1.05) rotate(-1deg);
	-o-transform: scale(1.05) rotate(-1deg);
	transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
	-webkit-transform: scale(1.05) rotate(1deg);
	-moz-transform: scale(1.05) rotate(1deg);
	-o-transform: scale(1.05) rotate(1deg);
	transform: scale(1.05) rotate(1deg);
}

ポイントは、アニメーション効果を作ることができる下記のプロパティの指定しています。

transition-duration
変化に掛かる時間を指定するためのプロパティ
時間の値を秒数での指定をここではしています。
transition-property
アニメーション効果を適用するCSSプロパティ名を指定するためのプロパティ
ここでは、transformプロパティにアニメーション効果を持たせているために、transformプロパティを指定。
transform
変形を適用するためのプロパティで移動、縮尺、回転、傾斜などの変形を適用することができます。
ここでは、縮尺(scale)と回転(rotate)を指定しています。
nth-child疑似クラス
ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用するための疑似クラスです。
ここでは、nth-child(2n)と書いていますが、nth-child(even)と書いても同じですので、ここの部分で右からホバーしても、左からホバーしても同じ効果を与えるために指定しています。

IE8でも試しましたが、border-radiusがサポートされていませんので、角丸にはなりませんが、一応動作しています。

すぐに導入できますので、ちょっと味のあるホバー効果をだしたい場合には有効ですね。