CSSだけで境界線をアニメーション描画｜マウスオーバーで動くボーダー演出（コピペOK）

CSSだけで、マウスオーバー時に境界線が順に描画されるようなアニメーションを実装したい方へ。
このページでは、疑似要素とtransitionを使って、JavaScriptを使わずにボーダーを動かす方法を紹介します。
コピペで使える軽量なコード付きで、hover時の演出にちょっとした動きを加えたいときに便利です。

ここにマウスカーソルが来ると、
境界線をアニメーション表示します。

HTML、CSSソース

<div class="frame_line">
	ここにマウスカーソルが来ると、<br>
	境界線をアニメーション表示します。
</div> 

<style>
/* css変数 疑似クラス:root で宣言するとグローバル変数になる */
:root{ --base-sec:0.1s;}
.frame_line{
  position:relative;
  padding:10px;
  display:inline-block;
}
.frame_line::before, .frame_line::after{
  position:absolute;
  content:" ";
  margin:0;
  box-sizing:border-box;
  width:0;
  height:0;
}
.frame_line::before{
  left:0;
  right:auto;
  top:0;
  bottom:auto;
  border-left:0px solid #777;
  border-right:0;
  border-top:0;
  border-bottom:0px solid #777;
  transition:
    width calc(var(--base-sec)*1) linear calc(var(--base-sec)*2),
    border-bottom calc(var(--base-sec)*3),
    height calc(var(--base-sec)*1) linear calc(var(--base-sec)*3),
    border-left calc(var(--base-sec)*4);
}
.frame_line::after{
  left:auto;
  right:0;
  top:auto;
  bottom:0;
  border-left:0;
  border-right:0px solid #777;
  border-top:0px solid #777;
  border-bottom:0;
  transition:
    width calc(var(--base-sec)*1) linear calc(var(--base-sec)*0),
    border-top calc(var(--base-sec)*1),
    height calc(var(--base-sec)*1) linear calc(var(--base-sec)*1),
    border-right calc(var(--base-sec)*2);
}
.frame_line:hover::before{
  border-left:1px solid #777;
  border-bottom:1px solid #777;
  height:100%;
  width:100%;
  transition:
    height calc(var(--base-sec)*1) linear calc(var(--base-sec)*0),
    border-left calc(var(--base-sec)*0),
    width calc(var(--base-sec)*1) linear calc(var(--base-sec)*1),
    border-bottom calc(var(--base-sec)*1);
}
.frame_line:hover::after{
  border-right:1px solid #777;
  border-top:1px solid #777;
  height:100%;
  width:100%;
  transition:
    height calc(var(--base-sec)*1) linear calc(var(--base-sec)*2),
    border-right calc(var(--base-sec)*2),
    width calc(var(--base-sec)*1) linear calc(var(--base-sec)*3),
    border-top calc(var(--base-sec)*3);
}
/*
  transition プロパティは、
    transition-property transition-duration
    transition-timing-function(ease,linear,ease-in-out等) transition-delay
  の一括指定プロパティです。
*/ 
</style>