Animación de nubes con CSS3

En este tutorial haremos una animación sencilla de nubes con CSS3.
Ver animación

Aquí la estructura en HTML5:
[cc lang=”html” escaped=”true”]

[/cc]

Dibujar una nube con CSS3

Esto es sencillo. Crearemos 3 divs llamadas circ1, circ2 y circ3, 1 con forma redonda y 2 ovaladas, con distintos tamaños y las encimaremos formando el dibujo de una nube sencilla:

Crearemos el círculo:

[cc lang=”css” escaped=”true”]
.circ1{
width:120px;
height:120px;
border-radius:120px;
background-color:rgb(255, 255, 255);
}
[/cc]

Ahora los ovalos: acá especificaremos dos radios en lugar de uno, para lograr el efecto de ovalado. También el alto será menor que el ancho.

[cc lang=”css” escaped=”true”]
.circ2{
width:150px;
height:80px;
border-radius: 80px / 50px;
background-color:rgb(255, 255, 255);
}

.circ3{
width:150px;
height:90px;
border-radius: 80px / 50px;
background-color:rgb(255, 255, 255);
}
[/cc]

Ahora los encimaremos usando solamente diferentes valores de márgenes para cada capa.

[cc lang=”css” escaped=”true”]
.circ1{
width:120px;
height:120px;
border-radius:120px;
background-color:rgb(255, 255, 255);
margin:20px 0 0 60px;
}

.circ2{
width:150px;
height:80px;
border-radius: 80px / 50px;
background-color:rgb(255, 255, 255);
margin:-90px 0 0 80px;
}

.circ3{
width:150px;
height:90px;
border-radius: 80px / 50px;
background-color:rgb(255, 255, 255);
margin:-90px 0 0 0px;
}
[/cc]

Especificar los keyframes

Utilizaré la propiedad transform para trasladar y escalar las nubes.

[cc lang=”css” escaped=”true”]
@-webkit-keyframes animar{
0% { }
50% { -webkit-transform:translateX(700px) scale(1.2);}
100% {-webkit-transform:translateX(0px); }
}
[/cc]

Aplicar la animación

Los 3 círculos (circ1, circ2 y circ3) estarán contenidos en #sq. A esta ID le especificaremos la animación y sus propiedades, así como también la opacidad.

[cc lang=”css” escaped=”true”]
#sq{
-webkit-animation-name: animar;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
opacity: 0.6;
margin:0;
position:absolute;
}
[/cc]

ya le aplicamos la animacion llamada “animar” a la capa #sq. También le aplicamos margen y opacidad porque ahora crearemos #sq1 y #sq2, y dentro le pondremos las nubes a cada ID. Entonces tendremos ahora 3 nubes que irán de un lado a otro y en algunos momentos se encimarán, y allí apreciaremos el efecto de la transparencia.

Para que cada nube tenga un tiempo diferente, a cada ID le especificaremos diferentes márgenes y diferente tiempo de animación (animation-duration).

Nos quedaría lo siguiente:

[cc lang=”css” escaped=”true”]
#sq{
-webkit-animation-name: animar;
-webkit-animation-duration: 20s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
opacity: 0.6;
margin:0;
position:absolute;
}

#sq2{
-webkit-animation-name: animar;
-webkit-animation-duration: 15s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
opacity: 0.4;
position:absolute;
margin:30px 0 0 0;
}

#sq3{
-webkit-animation-name: animar;
-webkit-animation-duration: 12s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
opacity: 0.7;
position:absolute;
margin:100px 0 0 50px;
}[/cc]

Recomiendo este tutorial de prefijos automáticos en CSS3.

Gracias a @kinduff por las correcciones

espero les sirva!!