webページに雪を降らせる

HTML と CSS だけで webページに雪を降らせます。
先に例をだして、あとで解説をします。

## 例１

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKJEzdK" data-editable="true" data-user="okm-uv" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/okm-uv/pen/KKJEzdK">
  snow1</a> by okm-uv (<a href="https://codepen.io/okm-uv">@okm-uv</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 例２

これだと寂しいので雪を増やしましょう

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PoVLNzX" data-editable="true" data-user="okm-uv" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/okm-uv/pen/PoVLNzX">
  snow2</a> by okm-uv (<a href="https://codepen.io/okm-uv">@okm-uv</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 例３

斜め方向にも降らしましょう

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="zYebqKZ" data-editable="true" data-user="okm-uv" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/okm-uv/pen/zYebqKZ">
  snow3</a> by okm-uv (<a href="https://codepen.io/okm-uv">@okm-uv</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 解説

何をしているか、例1 を使って説明します。

例1 の HTML はとても単純ですね。class に指定されている `snow` で見た目を整えて、 `fall1` で動かしています。

ここでは動きに関することを紹介したいので `fall1` について説明します。
`fall1` の定義はこちらです。

```css
.fall1 {
  animation: fall1 10s linear infinite;
}
```

### animation

まず `animation` とありますね。
`animation` はいくつかのプロパティを一括指定できるものです。

ドキュメントはこちらです。

https://developer.mozilla.org/ja/docs/Web/CSS/animation


今回は 4つの要素を指定しているのですが、それぞれ順に `@keyframes name`, `duration`, `timing-function`, `iteration-count` です。
`animation` の 4つめは本来 `delay` なのですが、 `delay` として解釈できない値が指定されたときはスキップされます (スキップされたプロパティにはデフォルト値が使われます)。`delay` に指定できる値は `200ms` や `1s` のような秒数で、 `infinite` は指定できないのでスキップされています。その結果として、本来は5番目である `iteration-count` に `infinite` を指定できています。

### @kayframes name

定義した @keyframes の名前です。今回は `fall1` の部分です。

```
@keyframes fall1 {
  0% {
    top: -20%
  }
  100% {
    top: 120%
  }
}
```

アニメーション時間について 0% を開始・100% を終了としたときに、どの時間にどの位置にいるかを指定します。今回の定義だと 0% (アニメーション開始) のときに `top: -20%` (画面外) の位置にいて、 100% (アニメーション終了) のときに `top: 120%` (画面外) の位置にいるようにアニメーションを指定しています。

ドキュメントはこちらです

https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes

### duration

アニメーションが開始から終了するまでの時間を秒単位で指定します。

ドキュメントはこちらです

https://developer.mozilla.org/ja/docs/Web/CSS/animation-duration

### timing-function

どのようにアニメーションが変化するかを指定します。
今回指定している `linear` だと等速で動きます。
他には `ease` や `steps(2)` などを指定できます。これは文章で説明するには限界があるので、実際に変えて確認してみるのがいいかと思います。

ドキュメントはこちらです

https://developer.mozilla.org/ja/docs/Web/CSS/animation-timing-function