CSS animation で遊び倒す　- bird -

CSS animation day10 となりました。


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


#1. 完成版

![ezgif.com-optimize (4).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/23deaa86-81ab-9279-90f6-7c8bf7ae3807.gif)

<p class="codepen" data-height="630" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="mvOywW" style="height: 630px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="cute bird">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/mvOywW/">
  cute bird</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
#2. CSS スプライトとは？

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

![bird.png](https://qiita-image-store.s3.amazonaws.com/0/232715/993ec89f-93b1-90d9-d02e-edf2b0aef343.png)


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

詳しくは [こちら](https://qiita.com/nekoneko-wanwan/items/b0e64404a5cff582247a)の記事や、こちらの [本](https://www.amazon.co.jp/dp/B07JJ344WK/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1) がまとまってます。






#3. 参考文献
[クリエイターボックス](https://www.webcreatorbox.com/tech/css-sprite-steps)　非常に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");
}
```
<img width="1405" alt="スクリーンショット 2019-01-30 8.11.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/e1c0948a-39fe-b63e-7e9c-9ead2dc726b3.png">


❷. 
どうやって、スプライト画像をアニメーションにするのでしょうか？
<br/>
ポイントは2つあります。
`1. 計算する`

<img width="917" alt="スクリーンショット 2019-01-30 8.30.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/0b7974b8-54b1-dee1-e2cb-beaa921f23a8.png">

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

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

この値を、画像のwidth, height　に設定します。
さらに、@keyframes 100% でこの画像を background-position で、移動させる時に、一番右の鳥が、一番左に移動すれば良いので、918px を設定すれば良さそうです。
<br/>
`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;
  }
}
```


![ダウンロード (19).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3ff6f5ff-a128-2f18-ffd7-6c8acee7a3f4.gif)

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

❹.
Figma で、編集した画像を、くっつけます。<img width="1039" alt="スクリーンショット 2019-01-30 10.18.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/fe3fa7b1-98ab-6b53-62ae-ee291dcb6e66.png">




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

```


![ダウンロード (20).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f4d06e00-1f9f-0d7e-b17d-d011d3438835.gif)


ちょっとカクカクしてますが、完成しました。
では、最後にこの鳥にもう一つ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);
  }
}
```
![ezgif.com-optimize (4).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/9524bc9f-6e1b-6efc-d36e-389a985af7cb.gif)


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