CSS animation で遊び倒す　- snow -

CSS animation day8 となりました。

最近寒いですね。

ということで、本日は、雪を表現したいと思います。


#1. 完成版
![ezgif.com-optimize (5).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/428b088e-b8dc-bfdd-49f3-4879a6230123.gif)

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="OdNrOB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="snow village">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/OdNrOB/">
  snow village</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. なぜか？
自然のアニメーションを取り入れることで、季節に応じた、デザインを取り入れることができるためです。

#3. 参考文献
https://www.youtube.com/watch?v=Ifzyhj9nHKQ&t=1s
[雪の無料画像](https://www.kisspng.com/free/snow.html)

#4. 分解してみる
<br/>
❶. 

まず背景を作ります。

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

```styles.css
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(black, gray);
}

section {
  background: url("../img/back.png") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
```
<img width="759" alt="スクリーンショット 2019-01-28 8.30.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/f30c856e-c69d-c0a1-8bd0-e94b29f41984.png">


 ちょっと凝って、グラデーションをつけました。
<br/>
❷.
雪を載せます。

```styles.css
.snow1 {
  background-size: cover;
  background: url("../img/snow.png");
  width: 100%;
  height: 100vh;
  position: absolute;
  opacity: 0.6;
  z-index: -1;
  top: 0;
  left: 0;
}

.snow2 {
  background-size: 100px;
  background: url("../img/snow2.png");
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
```
<img width="1102" alt="スクリーンショット 2019-01-28 8.44.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/d7496edc-99e0-9e33-4073-4015b29c3e70.png">

雪に奥行きをつけるために、snow.png のopacityを下げ、z-index で木にかぶらないようにしてます。 

<br/>
❸.
では、アニメーションをつけましょう。

```styles.css

.snow1 {
  background-size: cover;
  background: url("../img/snow.png");
  width: 100%;
  height: 100vh;
  position: absolute;
  opacity: 0.4;
  z-index: -1;
  top: 0;
  left: 0;
  filter: blur(3px);
  animation: snow1 30s infinite linear;
}

.snow2 {
  background-size: cover;
  background: url("../img/snow2.png");
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  animation: snow2 10s infinite linear;
}

@keyframes snow1 {
  0% {
    backgroud-position: 0px 0px;
  }
  100% {
    background-position: 0px 2400px;
  }
}

@keyframes snow2 {
  0% {
    backgroud-position: 0px 0px;
  }
  100% {
    background-position: 0px 1417px;
  }
}
```

![ezgif.com-optimize (5).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/8ba06be5-0c11-bb45-6404-fa3ce73cfde1.gif)


・ポイントは2つ
1. `遠近感を出す`ために、遠くのsnow.png　にblur をかけて、落ちてくる2つの雪の速度に差をつけて、パララックス効果を出す。

2.`それぞれの画像の縦幅を、keyframesのbackground-positionに設定`し、animation iteration count を infiniteにすることで、ガクガクしない一連のアニメーションを作る。　


では、また明日！