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) などを指定できます。これは文章で説明するには限界があるので、実際に変えて確認してみるのがいいかと思います。
ドキュメントはこちらです