CSS3 zum Erzielen eines einfachen schwebenden Hintergrundeffekts mit weißen Wolken

<div id="Wolken">
<div Klasse = "Wolke x1"></div>
<div Klasse="Cloud x2"></div>
<div Klasse = "Cloud x3"></div>
<div Klasse="Cloud x4"></div>
<div Klasse = "Cloud x5" </div>
</div>

.Wolke {
Breite: 200px; Höhe: 60px;
Hintergrund: #fff;
Rahmenradius: 200px;
-moz-Randradius: 200px;
-Webkit-Randradius: 200px;
Position: relativ;
}
.cloud:vorher, .cloud:nachher {
Inhalt: '';
Position: absolut;
Hintergrund: #fff;
Breite: 100px; Höhe: 80px;
Position: absolut; oben: -15px; links: 10px;
Rahmenradius: 100px;
-moz-Randradius: 100px;
-Webkit-Randradius: 100px;
-webkit-transform: drehen (30 Grad);
transformieren: drehen (30 Grad);
-moz-transform:drehen(30Grad);
}
.cloud:nach {
Breite: 120px; Höhe: 120px;
oben: -55px; links: auto; rechts: 15px;
}

.x1 {
-Webkit-Animation: Moveclouds 15 s linear unendlich;
-moz-animation: Moveclouds 15 s linear unendlich;
-o-Animation: Wolken bewegen, 15 s, linear, unendlich;
}
.x2 {
links: 200px;
-webkit-transform: Maßstab(0,6);
-moz-transform: Skala (0,6);
transformieren: Skalierung (0,6);
Deckkraft: 0,6; /*Deckkraft proportional zur Größe*/
/*Die Geschwindigkeit ist auch proportional zur Größe und Deckkraft*/
/*Mehr Geschwindigkeit. Weniger Zeit in 's' = Sekunden*/
-Webkit-Animation: Moveclouds 25 s linear unendlich;
-moz-animation: Moveclouds 25 s linear unendlich;
-o-Animation: Wolken bewegen, 25 s, linear, unendlich;
}
......
@-webkit-keyframes moveclouds {
0 % {margin-left: 1000px;}
100 % {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0 % {margin-left: 1000px;}
100 % {margin-left: -1000px;}
}
@-o-keyframes verschiebenclouds {
0 % {margin-left: 1000px;}
100 % {margin-left: -1000px;}
}