CSSでボーダーアニメーション - 四隅の空白を埋める #CSS

はじめに

以下のようなアニメーションを実装する機会があったので、備忘録かねてシェアしようかと思います。
ホバーした時に枠線が伸びて四隅の隙間が埋まるエフェクトです。
誰かの役に立てれば。

【サンプル】

仕組み

borderプロパティを使用した線は太さを変えることはできますが、長さは中身の要素に依存するので自在に変更することができません。
よって今回は疑似要素を使用してborderの線に見立てた要素を作成して実現しています。

疑似要素は一つの要素につき２つしか作成できないので、ホバーする要素とその内側にタグを追加して、二つのタグの::beforeと::afterを使用することにします。

それぞれの疑似要素の幅1pxにして、線を再現します。
長さはレスポンシブ対応を考えて80%と90%に指定しています。
※これらの数値はデザインに合わせて調整可能

ホバー時に四隅の隙間が埋まるように、通常時は上下の線を水平方向中央、左右の線を垂直方向中央にそれぞれ配置して四隅に隙間ができるような配置にしています。

あとはホバー時に線の長さを100%にして四隅が埋まるようにしています。

コード

html

<section class="border-animation">
        <div class="border-container">
            <div class="border-inner-container">
                <div class="text-container">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>A veritatis error, odio libero quis fugiat ex rerum quisquam? </p>
                </div>
            </div>
        </div>
    </section>

css

/* 見た目を整える用 */
.border-animation {
    margin-top: 10%;
}
.border-container {
    width: 60%;
    margin: 0 auto;
    padding: 5%;
}

.border-container {
    position: relative;
}

/* 線になる疑似要素の共通設定 */
.border-inner-container::before,
.border-inner-container::after,
.border-container::before,
.border-container::after {
  background-color: #3498db;
  content: '';
  display: block;
  position: absolute;
  transition: all .3s ease;
}

/* 上下の線のサイズと配置の指定 */
.border-container::before,
.border-container::after {
    width: 90%;
    transform: translateX(-50%);
    height: 1px;
}
.border-container::before{
    top: 0;
    left: 50%;
}
.border-container::after {
    bottom: 0;
    left: 50%;
}

/* 左右の線のサイズと配置の指定 */
.border-inner-container::before,
.border-inner-container::after {
    width: 1px;
    height: 80%;
    transform: translateY(-50%);
}
.border-inner-container::before {
    top: 50%;
    left: 0;
}
.border-inner-container::after {
    top: 50%;
    right: 0;
}

/* ホバー時に線の長さを100%に */
.border-container:hover::after,
.border-container:hover::before {
  width: 100%;
}
.border-container:hover .border-inner-container::after,
.border-container:hover .border-inner-container::before {
    height: 100%;
}

ポイント

線の色はbackground-colorで指定
線の太さはそれぞれのwidthとheightで調整
それぞれtop, leftを50%にし、transformで中央寄せ