（初心者向け）CSSホバーアニメーションの実装方法 #CSS

この記事で得られるもの

CSSのホバーのアニメーションの実装の考え方がわかる
CSSでホバーのアニメーションの実装方法を順を追って理解できる
考え方が理解できるため、サンプルコードのコピペではなく応用したコードが書ける

想定読者

CSSのセレクタ、プロパティの基本は知っているが、ホバーアニメーションを書こうと思うと混乱する方
動くものは書けるが、正しい綺麗な書き方を知りたい方
コードレビューでプロパティの重複や不要なプロパティを指摘されることがある方

前提

transitionを前提としています。
animation、JavaSctiptを使った動きはここでは解説しません。

実装

動きを定義するのではなく、ホバー状態・通常状態を定義し、その間を変化する

これが全ての考え方の基本になります。
どう動くか考えるのではなく、それぞれの状態ごとに装飾が定義され、その間を徐々に変化すると覚えてください。
基本がわかれば、大抵のデザインはこの応用で実装できます。

ホバーするとリンクの下線が伸びながら出現する場合

<a class="block">リンク<span class="block__decoration"></span></a>

See the Pen GRqjpRz by kne-cr (@kne-cr) on CodePen.

1.先にホバー状態をコーディング

色々な考え方はあると思いますが、私は通常状態のセレクタ内に一旦ホバー状態をコーディングすることをおすすめします。
なぜかと言うと、通常状態は装飾が非表示だったりシンプルで、ホバー状態で装飾が出現することが多いためです。
通常状態を先にコーディングしようとしても「ホバーするとこう出現するから...」ということを結局考えることが必要で、出現していない状態を先に考えることは慣れていないと難しいです。

.block {
  position: relative;
}

/* まだ:hoverステートはつけない */
/* ホバー時に現れる下線を一旦コーディングしてしまう */
.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
}

これで画面にはホバー状態の装飾が表示されるようになります。

2.次に通常状態をコーディング

2.1.ホバー状態と通常状態で値が変わるプロパティを探す

例えば、文字色が変わるのであればcolor、背景色が変わるのであればbackground(background-color)ですね。
特に注意が必要なのはなかったものが現れる場合で、この場合は透明だから見えてないのか、サイズが小さい（0）から見えてないのか、画面外にあるから見えてないのか、などどう捉えるかを決めましょう。
透明だから見えていないなら不透明度を上げながら出現するし、サイズが小さいから見えていないなら大きくなりながら出現します。
また、変化するものが以下である場合、基本的に表のプロパティを使うようにしましょう。理由は簡単に言うと、それ用にあるプロパティのため記述も直接的だし動きもスムーズだからです。

動き	NGプロパティ	OKプロパティ
その場で出現する	~~display~~	opacity
伸びて出現する	~~height, width~~	transform: scale
移動する	~~top, left, right, bottom~~	transform: translate

今回は横幅が伸びて出現するようにしたいので、transform: scaleを使います。

2.2.通常状態に書き換える

先の手順でホバー状態と通常状態で値が変わるプロパティはtransform: scaleであることがわかりました。
このプロパティを通常状態・ホバー状態それぞれに記載します。
今回は非表示（幅0倍）から表示（幅1倍）に変更したいため、以下の通り記載します。

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
  /* 通常状態は幅を0にして非表示 */
  transform: scaleX(0);
}

.block:hover .block__decoration {
  /* ホバー状態はそのまま表示 */
  transform: scaleX(1);
}

これで画面はホバーすると装飾が切り替わるようになります。

3.変化を定義する

あとはアニメーションのタイミングと速さを決めるだけです。

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
  transform: scaleX(0);
  /* 速さを指定 */
  transition: .5s;
}

.block:hover .block__decoration {
  transform: scaleX(1);
}

これで画面はサンプルコードと同じ状態になります。

ホバーするとリンクの下線が下からふわっと出現する場合

他の動きや形でも考え方は同じです。

<a class="block">リンク<span class="block__decoration"></span></a>

See the Pen MWejaKb by kne-cr (@kne-cr) on CodePen.

1.先にホバー状態をコーディング

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
}

2.次に通常状態をコーディング

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
  /* 通常状態は文字より下に離し透明にしておく */
  transform: translateY(5px);
  opacity: 0;
}

.block:hover .block__decoration {
  /* ホバー状態は文字は文字に近づけて不透明にする */
  transform: translateY(0);
  opacity: 1;
}

3.変化を定義する

.block {
  position: relative;
}

.block__decoration {
  position: absolute;
  left: 0;
  bottom: -3px;
  display: block;
  width: 100%;
  height: 2px;
  background: #00f;
  transform: translateY(5px);
  opacity: 0;
  /* 速さを指定 */
  transition: .5s;
}

.block:hover .block__decoration {
  transform: translateY(0);
  opacity: 1;
}

補足

正しさよりも分かりやすさを優先している箇所があります
NGプロパティは絶対使うなというわけではなく、回避するデメリットが大きければ使っても間違いではありません
あくまで思考を整理するための手順ですので、慣れればこの手順でやる必要は全くありません