CSS3で実装できるaタグのhoverアニメーション（１）

　CSS3を使えば、aタグのhoverアニメーションをいろいろと変えることができます！

　今回紹介するのは、当サイトの右上にあるナビゲーションメニューのhoverアニメーションでも使っている、マウスをaタグに乗せたら下線が中央からポワっと広がるアニメーション。これ、自分がよく使うアニメーションだったりするのですが、これを初めて見た時は
「カッケェ！！！」
と単純に思ってしまいましたｗ

　文字で書いてもどんなものかわからない…という方もいらっしゃると思いますので、見本を下に載せておきます。

　それでは早速、以下のようなHTMLソースを元にcssを記述したいと思います。

<ul>
	<li><a href="#">メニュー</a></li>
	<li><a href="#">メニュー</a></li>
	<li><a href="#">メニュー</a></li>
</ul>

上のソースは主にメニューバーで使われるリストタグになります。これに今回はaタグにマウスを乗せたら黒い下線が中央からポワっと広がるアニメーションを実装したいと思います！

　まず実装するcssは以下になります。

ul li a {
	box-sizing: border-box;
	display: inline-block;
	padding-bottom: 5px;
	position: relative;
	text-decoration: none;
}

ul li a::after {
	background: 好きな色;
	box-sizing: border-box;
	bottom: 0;
	content: '';
	left: 0;
	height: 3px;
	position: absolute;
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	width: 100%;
}

ul li a:hover::after {
	transform: scaleX(1);
	-webkit-transform: scaleX(1);   
	-ms-transform: scaleX(1);
}

こちらを実装すると上に載せた見本のようなhoverアニメーションを実装することができます！ちなみに上の見本にもあるように、webkitを使ってアニメーションを実装している形となります。

　なお下線の太さや色、位置は

ul li a::after {
	background: 好きな色;
	box-sizing: border-box;
	bottom: 0;
	content: '';
	left: 0;
	height: 3px;
	position: absolute;
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	width: 100%;
}

この
height: ～
ここを変更すると下線の太さを変更できますし、
background: ～
ここの色を指定すると下線の色を変更でき、
bottom: ～
ここを好きな値にすると位置を移動させることができます！ちなみにマイナスの値にすると文字の下に線が引かれるようになっているみたいです。

　下線の色や太さなどでも印象がガラっと変わるので、いろいろ試してみるとよいかと思われます(*^-^)

　なお、今回紹介したのはあくまで見本のソースなので、実際にサイトに実装する時には該当するidやclass名を変更する必要があるので、そこを忘れずに作業していただきますようお願いします。