コピペも可！CSSでラインが一周するホバーアニメーション

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

CSSでのアニメーションは色々あると思いますが、最近お気に入りのものを残しておこうと思います。

要素の外側をラインが一周して表示され、最終的にスクエアが生成される（サンプル「button1」）、というもの。

ライン系のアニメーションサンプルはググると様々なサイトで紹介されていますが、ラインが一周するものはサンプルがやや少ないので自分流のコードでサンプルを作ってみました。

体裁はhoverアニメーションにしていますが、キーフレーム等設定してanimationでもカスタマイズ実装可能。

仕組みとしては要素外側に疑似要素（::before / ::after）を2セット作り、上下左右4本のラインを順番に描画するというものです。

未ホバー時はラインのwidthもしくはheightを0、ホバー時に100％、そして描画順にtransition-delayをあてます。

ホバーを外した時の挙動（ボーダーの逆回転）は元のライン（:hoverしてない疑似要素）にホバー時とは逆順でtransition-delayを指定します（文字だと超絶説明しにくい）。

サンプルといってもたったの一つですが、どなたかのご参考になればこれ幸い。

サンプルは暇を見てちょくちょく追加していきます

See the Pen Line animation plain button sample by mycreatesite (@mycreatesite) on CodePen.

※スマホからはタップでホバー時アニメーションのみ見れます。

※SCSSなのでコピペなどする場合はコンパイル後のCSSをご参照ください。CODEPEN「SCSS」タブ→「VIEW COMPILED」