CSSで四角形描画アニメーション

ソースコード

<div class="square"></div>

.square{
  width: 100px;
  height: 100px;

  background-image: 
    linear-gradient(00deg, black, black),
    linear-gradient(00deg, black, black),
    linear-gradient(00deg, black, black),
    linear-gradient(00deg, black, black);

  background-repeat: no-repeat;

  background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px;
  background-position: left bottom, left top, right top, right bottom;

  animation: square_anim 2s linear forwards;
}

@keyframes square_anim{
  00%{
    background-size: 
      2px 0, 0 2px,
      2px 0, 0 2px; 
  }
  25%{
    background-size: 
      2px 100%, 0 2px,
      2px 0, 0 2px;
  }
  50%{
    background-size: 
      2px 100%, 100% 2px,
      2px 0, 0 2px;
  }
  75%{
    background-size: 
      2px 100%, 100% 2px,
      2px 100%, 0 2px;
  }
  100%{
    background-size: 
      2px 100%, 100% 2px,
      2px 100%, 100% 2px;
  }
}

解説

四角形を作る

アニメーションは後回しで、まずは四角形を作ります。

4つの線形グラデーションを指定する

要素の幅高さは等しくすると作りやすいです。

四角形を構成する4つの線を線形グラデーションで作ります。
線1本につき線形グラデーションを1つ使うので4つ指定します。

画像の繰り返しはいらないので無効化します。

.square{
  width: 100px;
  height: 100px;

  /* 4つの線形グラデーションを指定する */
  background-image: 
    linear-gradient(00deg, black,black),
    linear-gradient(00deg, black,black),
    linear-gradient(00deg, black,black),
    linear-gradient(00deg, black,black);

  /* 画像繰り返しの無効化 */
  background-repeat: no-repeat;
}

線の太さと長さを決める

指定した各グラデーションのサイズを変える。
background-size: 幅 高さ;
複数指定には,で区切ります。

縦線は幅→線の太さ、高さ→線の長さ
横線は幅→線の長さ、高さ→線の太さ

縦線と横線をどの順番で作るかでsizeの指定順が変わるので注意。
この記事では左辺(縦線)、上辺(横線)、右辺(縦線)、下辺(横線)の順で作ります。

.square{
  /* 上記のコードは省略 */

  background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px;
}

ここでは線の太さを2px、長さを要素いっぱいにするので、
縦線は幅が2pxで高さ100%、横線は幅が100%で高さが2pxとなります。

線の始点を決める

background-position: x y;
複数指定には,で区切ります。
先ほど説明したように、指定順は左辺(縦線)、上辺(横線)、右辺(縦線)、下辺(横線)とします。

.square{
  /* 上記のコードは省略 */

  background-position: 
    left bottom, left top, right top, right bottom;
}

1つ目の指定で左辺(縦線)の始点を左下に、
2つ目の指定で上辺(横線)の始点を左上に、
3つ目の指定で右辺(縦線)の始点を右上に、
4つ目の指定で下辺(横線)の始点を右下に指定。

四角形はこれで完成です。

描画アニメーション

線の長さをアニメーションさせることで描画アニメーションを実現しています。

.square{
  /* 上記のコードは省略 */

  animation: square_anim 2s linear forwards;
}

@keyframes square_anim{
  00%{
    background-size: 
      2px 0, 0 2px,
      2px 0, 0 2px; 
  }
  25%{
    background-size: 
      2px 100%, 0 2px,
      2px 0, 0 2px;
  }
  50%{
    background-size: 
      2px 100%, 100% 2px,
      2px 0, 0 2px;
  }
  75%{
    background-size: 
      2px 100%, 100% 2px,
      2px 100%, 0 2px;
  }
  100%{
    background-size: 
      2px 100%, 100% 2px,
      2px 100%, 100% 2px;
  }
}

00%では全ての辺の長さを0にしておきます。
~ 25%で左辺(縦線)を描画します。
~ 50%で上辺(横線)を描画します。
~ 75%で右辺(縦線)を描画します。
~ 100%で下辺(横線)を描画します。

これで四角形描画アニメーションは完成です。

---

補足: background-sizeを使ったアニメーションはbackground-positionが影響する

同じアニメーションでもbackground-positionの値によって挙動が変化します。
実際に見てみましょう。

<div class="sample"></div>

.sample{
  width: 100px;
  height: 100px;

  background-image: linear-gradient(00deg, green, green);

  background-repeat: no-repeat;
  background-size: 100% 2px;

  /* アニメーションに影響 */
  background-position: left top;

  /* アニメーション */
  animation: sample_anim 2s linear infinite;
}

@keyframes sample_anim{
  00%{
    background-size: 0 2px;
  }
  100%{
    background-size: 100% 2px;
  }
}

background-position: left top;

左から右へ伸びる。

background-position right top;

右から左へ伸びる

background-positionで描画の開始地点が決定されるので挙動が変化します。
leftなら左から描画、rightなら右から描画、topなら上から描画、bottomなら下から描画されます。