CSS3 でシンプルな白い雲が浮かぶ背景効果を実現

<div id="雲">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>

。雲 {
幅: 200ピクセル; 高さ: 60ピクセル;
背景: #fff;
境界線の半径: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
位置: 相対的;
}
.cloud:before、.cloud:after {
コンテンツ： '';
位置: 絶対;
背景: #fff;
幅: 100ピクセル; 高さ: 80ピクセル;
位置: 絶対; 上: -15px; 左: 10px;
境界線の半径: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: 回転(30度);
変換: 回転(30度);
-moz-transform:回転(30度);
}
.cloud:after {
幅: 120ピクセル; 高さ: 120ピクセル;
上: -55px; 左: 自動; 右: 15px;
}

.x1 {
-webkit-animation: moveclouds 15s 線形無限;
-moz-animation: moveclouds 15s 線形無限;
-o-アニメーション: moveclouds 15s 線形無限;
}
.x2 {
左: 200px;
-webkit-transform: スケール(0.6);
-moz-transform: スケール(0.6);
変換: スケール(0.6);
opacity: 0.6; /*サイズに比例した不透明度*/
/*速度はサイズと不透明度にも比例します*/
/*速度が速いほど、時間が短くなります (単位は 's' = 秒)*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s 線形無限;
-o-アニメーション: moveclouds 25s 線形無限;
}
......
@-webkit-keyframes 移動クラウド {
0% {左マージン: 1000px;}
100% {左マージン: -1000px;}
}
@-moz-keyframes 移動クラウド {
0% {左マージン: 1000px;}
100% {左マージン: -1000px;}
}
@-o-keyframes 移動クラウド {
0% {左マージン: 1000px;}
100% {左マージン: -1000px;}
}