Pocket

線を引くようなアニメーション

よくグローバルメニューなどにマウスオーバーするとその要素に下線がアニメーション表示されるのを見かけます。ちょっとしたアニメーションがあるだけで、気持ちおしゃれに見えるから不思議。ということで、HTMLCSSでの下線アニメーションをまとめておきます。

HTMLの以下のコードを使用して、CSSの設定を行います。

下線が左から右に引かれるアニメーション

左から右へのアニメーションは以下のように設定します。

a要素の擬似要素afterに対して、transitionを設定してアニメーションの準備。a要素の疑似クラスhoverにマウスオーバーした時にwidthを100%にするように設定します。したがって、a要素の擬似要素afterのwidthを0にしておきます。これでいい感じでアニメーションが動作します。

下線が左から右に引かれるアニメーションの動作確認

動作確認のサンプルは以下のとおりです。マウスオーバーしてみましょう。

下線が右から左に引かれるアニメーション

次に右から左へアニメーションさせます。

今度は右下から開始するので、a要素にposition: relative(相対指定)を設定して、a要素のafter疑似要素を右下に絶対指定(position: absolute;)してあげます。設定の違いはこれだけです。

下線が右から左に引かれるアニメーションの動作確認

動作確認のサンプルは以下のとおりです。マウスオーバーしてみましょう。

下線が中央から左右に引かれるアニメーション

これが一番やりたかったこと。中央から左右に広がるように下線が引かれるアニメーションをさせます。

a要素のafter疑似要素に追加して、before疑似要素を使用します。中央から引かれる下線の左下線をbefore疑似要素で、右下線をafter疑似要素で描画します。

開始位置が中央なので、before/afterそれぞれの座標をbeforeは左から50%、afterは右から50%の位置に設定。width値も100%でなく、それぞれ50%で設定します。

下線が中央から左右に広がるように引かれるアニメーションの動作確認

動作確認のサンプルは以下のとおりです。マウスオーバーしてみましょう。

できた!\(^o^)/
細かいアニメーションシリーズ色々おぼえておこう。