Help us understand the problem. What is going on with this article?

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

squareAnim.gif

ソースコード

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

left_0.gif

左から右へ伸びる。

background-position right top;

right_0.gif

右から左へ伸びる

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away