【CSS】マウスを乗せたときにボーダーが伸びるアニメーション

おはこんばんにちは！ノボルです。

今回は、マウスを乗せたとき(マウスオーバー)に
ボーダーが伸びるCSSアニメーションをご紹介します。

コードだけだとイメージがつかないかもしれないので、
CodePenで動きが確認できるようにしました！

ほぼコピペで再現できるので、皆さんもアニメーションをつけて
ウェブサイトをよりカッコよくしてみては？

今回実装するアニメーションは以下の通りです。
画面の青いボックスにカーソルを合わせてみてください。
四辺のボーダーが伸びたり縮んだりすると思います。
では、早速実装していきましょう！

See the Pen oNNbdrB by ZeroRequiem126 (@zerorequiem126) on CodePen.

HTMLで要素を作成
CSSでHTMLにスタイルをつける
最後に

HTMLで要素を作成

CSSでアニメーションをつける前に、まずHTMLで要素を作成してあげる必要があります。
今回はボタン要素をマウスーバーした際に四辺のボーダーを表示させます。
上下左右のボーダーを表示するスパン要素を記述し、それをdivタグで囲ってあげます。

HTML


<div class="border-animation">
  Let's give it a try!   <code><！--</code> 左側の文は自由に変えて大丈夫です！ <code>-->
  <span class="border top"></span>
  <span class="border right"></span>
  <span class="border bottom"></span>
  <span class="border left"></span>
</div>

Let's give it a try! <code><！--</code> 左側の文は自由に変えて大丈夫です！ <code>-->

</div>

CSSでHTMLにスタイルをつける

次に、上で作成したHTMLにCSSでアニメーションをつけていきます。

上下左右のボーダーとなるspanタグを記述しましたが、
正確には、ボーダーのように見える要素という表現がふさわしいです。
上下左右にわかれた要素にスタイル・幅・高さ・背景色を指定していきます。
マウスを当てたときのアニメーションは
transform(トランスフォーム)を使用して表現します。

CSS


.border-animation {
  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);
}

/* マウスオーバーしたときのアニメーション */
.border-animation:hover .border {
  transform: translate3d(0, 0, 0);
}

.border-animation {

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);

}

/* マウスオーバーしたときのアニメーション */

.border-animation:hover .border {

transform: translate3d(0, 0, 0);

}

最後に

今回ご紹介したホバーアニメーションは、数ある中の一つにすぎません。
他の動きを実装してみたいという方は、以下の記事がオススメです。
カッコいいアニメーションが多数紹介されており、参考になるかと思います。
https://lab.sonicmoov.com/markup/css/hover-css/

以上、マウスを乗せたときボーダーが伸びるアニメーションのご紹介でした！
最後まで読んで頂きありがとうございました(o^^o)