CSS animation で遊び倒す　- bird -

Last updated at 2019-01-30Posted at 2019-01-30

CSS animation day10 となりました。

本日は、CSS スプライトを取り入れた、鳥を表現したいと思います。

#1. 完成版

See the Pen cute bird by hiroya iizuka (@hiroyaiizuka) on CodePen.

#2. CSS スプライトとは？

スプライト画像とは、パラパラ漫画のような画像です。RPGでは、昔から取り入れられてるそうです。

近年、画像の最適化の手法に、CSS スプライトが取り入れられてます。
画像は重く、パフォーマンスチューニングの観点ではもっとも力を入れなければいけない所です。
CSSスプライトは、アプリなどで使う予定の画像を、全て一つにまとめることで、リクエスト回数を抑える手法です。

詳しくはこちらの記事や、こちらの本がまとまってます。

#3. 参考文献
クリエイターボックス　非常にCSSのことがわかりやすくまとめてあります。

#4. 分解してみる
❶.
まず、背景を作ります。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="bird"></div>
  </body>
</html>

styles.css

body {
  margin: 0;
  padding: 0;
  background-image: url("../img/forest.png");
}

❷.
どうやって、スプライト画像をアニメーションにするのでしょうか？

ポイントは2つあります。
1. 計算する

先ほどの画像の横幅は 918px であり、鳥の一つ一つの横幅は
918 / 5 = 183.6px になります。

同様に、画像の縦幅は506px であり、鳥の縦幅は
506 / 3 = 168.6 pxになります。

この値を、画像のwidth, height　に設定します。
さらに、@keyframes 100% でこの画像を background-position で、移動させる時に、一番右の鳥が、一番左に移動すれば良いので、918px を設定すれば良さそうです。

2. animation にstep を使う。
step の詳細は、参考文献の記事をチェックしてください。
step(5) とすることで、段階的にパラパラ漫画のように、鳥が移動します。　
これらを駆使して、やって見ましょう。

❸.

styles.css


.bird {
  background: url("../img/bird.png");
  width: 183.6px;
  height: 168.6px;
  animation: fly 1s steps(5) infinite;
}

@keyframes fly {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -918px 0;
  }
}

しかし、このままだと、翼が上半分しか動かせていないので、下半分の翼のアニメーションを作ります。　画像を編集する必要がありますね。

❹.
Figma で、編集した画像を、くっつけます。

styles.css

.bird {
  background: url("../img/birds.png");
  width: 162px;
  height: 168.6px;
  animation: fly 2s steps(14) infinite;
}

@keyframes fly {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2587px 0;
  }

ちょっとカクカクしてますが、完成しました。
では、最後にこの鳥にもう一つkeyframes をつけ、動かしていきましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="move">
      <div class="bird"></div>
    </div>
  </body>
</html>

styles.css

.move {
  position: absolute;
  top: 0%;
  left: 0%;
  will-change: transform;
  animation: move 6s linear infinite;
}

@keyframes move {
  0% {
    transform: scale(0.3) translateX(-10vw);
  }

  10% {
    transform: translateY(2vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(0vh) translateX(30vw) scale(1);
  }

  30% {
    transform: translateY(4vh) translateX(50vw) scale(1.5);
  }

  40% {
    transform: translateY(2vh) translateX(55vw) scale(2);
  }

  50% {
    transform: translateY(0vh) translateX(60vw) scale(3);
  }

  60% {
    transform: translateY(0vh) translateX(50vw) scale(5);
  }

  80% {
    transform: translateY(0vh) translateX(60vw) scale(8);
  }
  100% {
    transform: translateY(0vh) translateX(100vw) scale(10);
  }
}

scale とtransform, translate を使って、怪獣のような鳥ができました。では、また明日〜！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

CSS animation で遊び倒す - bird -

CSS animation で遊び倒す　- bird -