ソースコード
<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なら下から描画されます。