CSSで一方方向に進むアニメーションを実装する

オンマウス時にラインを左から右に表示、マウスアウト時にラインを右から左に非表示にするようなアニメーションを実装してみます。

サンプルコード

aタグにclassを付けて、そのclassに対して処理を実装してみます。

HTML

<a href="" class="left-to-right">オンマウスでアニメーション</a>

次にCSSです。
ラインは疑似要素で作成して、positionで配置します。

CSS

.left-to-right {
	display: inline-block;
	position: relative;
}
.left-to-right::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;

	/* アニメーション用の設定 */
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 300ms;
}
.left-to-right:hover::after {
	transform: scaleX(1);
	transform-origin: left center;
}

左から右にアニメーションするデモページ
ポイントは15～23行目の部分で、アニメーション自体はtransformのscale()で拡大率を0から1にすることで表示のアニメーションを実装しています。
その際、オンマウス時はtransform-originをleft、マウスアウト時はtransform-originをrightにすることで、アニメーションの基準位置を変更して一方方向に進むアニメーションにしています。

leftとrightを入れ替えることで、右から左へのアニメーションも実装できます。

CSS

.right-to-left {
	display: inline-block;
	position: relative;
}
.right-to-left::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;

	/* アニメーション用の設定 */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms;
}
.right-to-left:hover::after {
	transform: scaleX(1);
	transform-origin: right center;
}

右から左にアニメーションするデモページ

同様に、上から下も可能です。
縦方向の場合はtransformのscaleY()を使用します。

CSS

.top-to-bottom {
	display: inline-block;
	position: relative;
}
.top-to-bottom::after {
	content: '';
	display: block;
	position: absolute;
	bottom: -30px;
	left: 50%;
	width: 2px;
	height: 30px;
	background-color: #000;

	/* アニメーション用の設定 */
	transform: scaleY(0);
	transform-origin: center bottom;
	transition: transform 300ms;
}
.top-to-bottom:hover::after {
	transform: scaleY(1);
	transform-origin: center top;
}

上から下にアニメーションするデモページ