雲が上下にふわふわ動くアニメーションを画像無しで作りたい

添付画像の様な上半分の雲で、雲の上部分を上げにランダムにふわふわ動かしたいのですが、やり方を調べてもわかりませんでした。
ふわふわの一つ一つが要素で上下にランダムに動かせばよいのかなとは思っているのですが、
・横一列に並べながら
・ランダムに上下に動かす
がわからず。。

わかる方が居ましたら、ご教示のほどよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じではいかがでしょうか。

html
1<div id="wrapper">
2<div id="sky">
3<div id="clouds">
4<div class="cloud"></div>
5<div class="cloud"></div>
6<div class="cloud"></div>
7<div class="cloud"></div>
8<div class="cloud"></div>
9</div>
10</div></div>

CSS
1#wrapper{
2  width:200px;
3  height:200px;
4  overflow:hidden;
5}
6#sky{
7  position:relative;
8  width:400px;
9  height:200px;
10  background:linear-gradient(#55bbff,#cceeff);
11}
12#clouds{
13  position:relative;
14  top:150px;
15}
16.cloud{
17  display:inline-block;
18  border-radius: 100px;
19  vertical-align:middle;
20  animation: huwahuwa 2s ease-in-out -13s infinite alternate;
21}
22.cloud:nth-child(1){
23  border:solid 40px white;
24  margin-left:-10px;
25  animation-delay: 2.3s;
26}
27.cloud:nth-child(2){
28  border:solid 30px white;
29  margin-left:-20px;
30  animation-duration: 1.9s;
31}
32.cloud:nth-child(3){
33  border:solid 15px white;
34  margin-left:-15px;
35  animation-duration: 2.2s;
36}
37.cloud:nth-child(4){
38  border:solid 20px white;
39  margin-left:-15px;
40  animation-duration: 1.8s;
41}
42.cloud:nth-child(5){
43  border:solid 50px white;
44  margin-left:-10px;
45  animation-duration: 2.5s;
46}
47@keyframes huwahuwa {
48    0% { transform:translateY(-10px); }
49  100% { transform:translateY(  0px); }
50}