どうも！LSSです！！
ちょっと試みてみたい事ができたので、やってみました。
背景多重アニメーション
なんか白くてぼんやりしたもの、大きいのと小さいのが並んでいます。
大きいグループと小さいグループ、それぞれ左右にサインカーブ状に揺れながら、異なる速度で落下するというサンプルです。
コード
<style><!--
@keyframes snowh{
0%{background-position-y:0px,0px;}
100%{background-position-y:300px,400px;}
}
@keyframes snoww{
0%{background-position-x:0px,50px;}
100%{background-position-x:150px,0px;}
}
#bg{
background-color:black;
width:100%;
height:400px;
background-image:radial-gradient(circle at 40px 40px,#ffffff80 0%,#ffffff00 30%),radial-gradient(circle at 80px 80px,#ffffff80 0%,#ffffff00 15%);
background-size:100px 100px;
animation:snowh 11s linear 0s infinite,snoww 3s ease-in-out 0s infinite alternate;
}
--></style>
<div id="bg"> </div>
コード解説
大きいものと小さいものを描いているのは、
background-image:
radial-gradient(circle at 40px 40px,#ffffff80 0%,#ffffff00 30%)
,radial-gradient(circle at 80px 80px,#ffffff80 0%,#ffffff00 15%);
↑この部分です。
２つの radial-gradient をカンマ区切りで並べており、前者（最後が30%のもの）が大きいもの、後者（最後が15%のもの）が小さいものです。
また、それに動きを与えているのは、
animation:
snowh 11s linear 0s infinite
,snoww 3s ease-in-out 0s infinite alternate;
この部分で、こちらも２つのアニメーション指定をカンマ区切りで並べています。
こちらは「縦移動」と「横移動」で分けています。
「縦移動」をlinear、「横移動」をease-in-outで指定しているため、
「落下速度は均等、左右移動は早くなったり遅くなったり」
という、ちょっと複雑な動きを実現しているんですね。
なお、それぞれ中に書かれているキーワード「infinite」は「無限繰り返し」、「alternate」は「アニメ再生後、逆再生して１セットという指定」を意味しています。
「縦移動」の動きの内容の指定をしているのは、
@keyframes snowh{
0%{background-position-y:0px,0px;}
100%{background-position-y:300px,400px;}
}
↑この部分です。
背景位置をずらすのは「background-position」というプロパティですが、今回使用している「background-position-y」は「縦位置だけをずらす」プロパティになります。
0%{background-position-y:0px,0px;}
のように、値はまたカンマ区切りで「0px」と「0px」を並べています。
これは、このコード解説の最初に書いた「２つのradial-gradient」に呼応しています。
どちらも0pxなので
「アニメ進行時間 0% 時点では、どちらも縦は初期位置」
という事ですね。
それが 100% の時点では、
100%{background-position-y:300px,400px;}
前者（大きいほう）は下に300pxの位置まで移動、後者（小さいほう）は下に400pxの位置まで移動するように、指定しています。
これにより、「小さいほうの落下は大きいほうの落下よりちょっと速い」って事になりますね。
「横移動」の動きの内容の指定をしているのは、
@keyframes snoww{
0%{background-position-x:0px,50px;}
100%{background-position-x:150px,0px;}
}
↑この部分です。
この「background-position-x」は「横位置だけをずらす」プロパティになります。
0%{background-position-x:0px,50px;}
のように、値はまたカンマ区切りで「0px」と「50px」を並べています。
これも、このコード解説の最初に書いた「２つのradial-gradient」に呼応しています。
前者は0px、後者は50pxなので
「アニメ進行時間 0% 時点では、大きいほうは横は初期位置、小さいほうは右に50pxずれた位置」
という事ですね。
それが 100% の時点では、
100%{background-position-x:150px,0px;}
前者（大きいほう）は右に150pxの位置まで移動、後者（小さいほう）は初期位置まで移動するように、指定しています。
これにより、「大きいほうと小さいほうは、横方向は常に逆向きに移動している」って事になりますね。
あとがき
「単一の要素で複数のradial-gradientに別の動きを与え、さらに上下と左右で別々に制御する」という事ができました^^
昨日の記事から思いついた事なんですけどねｗ
アニメーションも0%と100%しか扱っていないので、そこをいじるともうちょっと複雑な事（大と小の左右折り返しタイミングをずらすとか） もできるのかも。できないかも？ｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
