【CSS】マウスオーバーで四辺のボーダーが伸びるアニメーション

こんにちは、Ryohei（@ityryohei）です！

マウスオーバーで要素の四辺のボーダーがボックスに沿って伸びる（走る）CSSアニメーションのご紹介です。

文章では伝わりにくいかと思いますので、下記にデモを用意しました。「Hover Me!」と表示された青色のボタンにマウスカーソルを載せてみてください。

See the Pen
Hover Animation9-1 | CSS by ryoy (@intotheprogram)
on CodePen.

要素の四辺のボーダーがボックスに沿って白いボーダーがゆっくりと表示されたかと思います。

本記事では上記のアニメーションの実装方法をご紹介しています。

では、解説していきます。

HTMLでボーダーを表示する要素を作成する

最初にHTMLでボーダーを表示する要素を作成していきます。今回はボタン要素をマウスーバーした際に四辺のボーダーを表示させます。HTMLでボタンを記述して、その子要素として上下左右のボーダーを表示する要素を記述します。完成すると下記の用になります。

HTML

<button>
  Hover Me!
  <span class="border top"></span>
  <span class="border right"></span>
  <span class="border bottom"></span>
  <span class="border left"></span>
</button>

CSSで要素にスタイルを定義する

続いて上記で作成したHTMLにスタイルを定義していきます。

ボタン要素の中に上下左右のボーダーを記述していただいたかと思いますが、より具体的に申しますと、ボーダーのように見える細長い要素となります。上下左右のわかれた細長い要素にスタイルに幅と高さをしていして、背景色を定義していきます。マウスオーバーした際にボーダーの表示位置が移動するアニメーションはトランスフォームを使用しています。

CSS

button {
  position: relative;
  display: block;
  width: 300px;
  height: 70px;
  margin: 40px auto 0;
  color: #fff;
  font-size: 1.5em;
  background: #007db9;
  overflow: hidden;
}

/* ボーダー */
.border {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  background-color: #fff;
  overflow: hidden;
  transition: 1s;
}  
/* 上ボーダー */
.border.top {
  width: 100%;
  top: 0;
  left: 0;
  transform: translate3d(-100%, 0, 0);
}
/* 右ボーダー */
.border.right {
  height: 100%;
  top: 0;
  right: 0;
  transform: translate3d(0, -100%, 0);
}
/* 下ボーダー */
.border.bottom {
  width: 100%;
  right: 0;
  bottom: 0;
  transform: translate3d(100%, 0, 0);
}
/* 左ボーダー */
.border.left {
  height: 100%;
  bottom: 0;
  left: 0;
  transform: translate3d(0, 100%, 0);
}

/* マウスオーバー */
button:hover .border {
  transform: translate3d(0, 0, 0);
}

上記をすべて記述すると、冒頭でご紹介したデモのアニメーションが完成します。

注意点としては、ボーダーの親要素の部分には必ず「overflow: hidden;」を指定する点です。もし指定しないと下記ように上下左右のボーダーが親要素からはみ出す形となります。

See the Pen
Hover Animation9-2 | CSS by ryoy (@intotheprogram)
on CodePen.

コーディングされる際は、その点に気を付けていただければと思います。