CSS Animation で Loading Animation を作る

why

モンハンの Loading... が流れているのを作っている夢を見た

2ndG で遊んでいただけのあの頃とは違い、今なら作れるはず

pure な HTML CSS っていうのもやってみたかった

アニメーションってどうやるんだっけ？

www.w3schools.com

調べると w3schools がヒットした

わかりやすそうなサンプルを書き出す

html は単に div だけ className もつけずにおき、対応する CSS で div に

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

width, height をつけて色をつけてわかりやすい四角にしたした後

置き方を相対的にして、

animation-name をつけて動く時間を指定して

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

つけたアニメーション用の名前に対して @keyframe で

設定された時間に対して

0% の時の色と x 座標 y 座標

25% の時の色と x 座標 y 座標...

と、いう風に書いていく。そうすると動く

https://kaede0902.github.io/css/animation/squareMove/

とりあえず簡単に動かすことはできた

理想のモンハン Loading のために足りないものたち

Loading 中だからずっと動かしたい

1文字1文字が画面の左から出てきて画面外に飛んでいくようにしたい

四角を動かしたいわけではなく、文字を装飾して動かしたい

Loading っぽく、頑張って読み込んでる感を出したい。慣性？

www.w3schools.com

animation-delay を入れると頑張って動いてる感が出るのは良さそう

www.w3schools.com

animation-iteration-count を使うと任意の回数繰り返せる。infinite だと無限に動く

www.w3schools.com

ease では slow start や slow end を実現できるが、ゆっくり始まって素早く流れていくのは実装できない。

速度は諦めるか

実際に作る

* {
  background: black;
  color: white;
}
div {
  width: 100px;
  height: 100px;
  background-color: black;
  color: white;
  position: relative;

  animation-name: loading;
  animation-duration: 5s;
  animation-delay : 2s;
  animation-iteration-count : infinite;
}
@keyframes loading {
  0%    {left:0px; top:500px;}
  25%   {left:100px; top:500px;}
  50%   {left:200px; top:500px;}
  75%  {left:300px; top:500px;}
  100%  {left:400px; top:500px;}
}

スマフォでも高さは 800px 位あると仮定して y 座標は 500でやる

6 段階で位置調整して作った

1文字ずつ動かしたり、飛ぶように画面外に出ていくのは今度追加する

kaede0902.github.io

とにかく作れた！！！

起きてから 1h10m で作れたw

今後思いついたものは即座に作れるようになりたいw