webページに雪を降らせる #CSS

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

例１

See the Pen snow1 by okm-uv (@okm-uv) on CodePen.

例２

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

See the Pen snow2 by okm-uv (@okm-uv) on CodePen.

例３

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

See the Pen snow3 by okm-uv (@okm-uv) on CodePen.

解説

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

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

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

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

animation

まず animation とありますね。
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% (画面外) の位置にいるようにアニメーションを指定しています。

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

duration

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

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

timing-function

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

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