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

Wordpress
Image by 200 Degrees from Pixabay

「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(不透明)になるように設定するとホバーイン・ホバーアウトした際、なめらかにフェードイン・フェードアウトさせることができる。

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

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

コメント

タイトルとURLをコピーしました