【CSS】Afterを使ったホバーアニメーションの仕組み

「CSSでafterとかの疑似要素を使ったホバーアニメーションの仕組みが知りたい」

「なぜこんなアニメーションになるの？」

といった疑問が自分のなかに出てきたので簡単にメモします。

CSSについては初心者のため、正確性という点ではあまり強くないのでご参考までにお読みいただけると幸いです。

仕組み

今回は文字の中央下からバーが広がるアニメーションの仕組みを調べました。

このサイトのヘッダーメニューに使われています。

コードと説明

.navi-in a::after{
position: absolute;←親ボックス（要素）の左上を基準にした(絶対)位置にする

bottom: -3px;←親ボックスの底から、要素をさらに3px下に移動する（正の数だと上に移動します）

left: 0px;←親ボックスの左端との距離を0pxにする（くっつける）

content: “”;←after、beforeには必須のプロパティ。文字列などを入れる必要がないので空欄にしています。

width: 100%;←親ボックスに対しての幅です。（この場合、親ブロックの幅と等しくなります）

height: 2px;←背景(アニメーションバー)の高さを指定

background: #fff;←背景色（白）

transform: scale(0, 1);←縮尺比率の指定（水平,垂直)

transition: .3s;←ホバーイン・ホバーアウト時の変化にかかる時間の指定

opacity:0;←透明度(0:透明～1:不透明)
}

.navi-in a:hover::after{
transform: scale(1, 1);←縮尺比率の指定（水平,垂直）
opacity:1;←透明度(0:透明,1:不透明)
}

コードのみ(コピー用)

.navi-in a::after{
position: absolute;
bottom: 0px;
left: 0px;
content: ”;
width: 100%;
height: 2px;
background: #fff;
transform: scale(0, 1);
transition: .25s;
opacity:0;
}

.navi-in a:hover::after{
transform: scale(1, 1);
opacity:1;
}

縮尺比率(transform:scale)が0の場合、アニメーションバーが不可視化する。

opacity（透明度）を通常時0、ホバーした際に1(不透明)になるように設定するとホバーイン・ホバーアウトした際、なめらかにフェードイン・フェードアウトさせることができる。

理解の一助になれば幸いです。ご質問などがありましたら、コメント欄までお寄せいただければ、できる範囲でですがお答えさせていただきます。

最後までお読みくださり、ありがとうございました。