Animación de nubes con CSS3

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:

Código :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>Animacion</title>
   <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
   <div id="sq">
      <div class="circ1"></div>
      <div class="circ2"></div>
      <div class="circ3"></div>
   </div>
   <div id="sq2">
      <div class="circ1"></div>
      <div class="circ2"></div>
      <div class="circ3"></div>
   </div>
   <div id="sq3">
      <div class="circ1"></div>
      <div class="circ2"></div>
      <div class="circ3"></div>
   </div>
</body>
</html>

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:

Código :

.circ1{
   width:120px;
   height:120px;  
   border-radius:120px;
   background-color:rgb(255, 255, 255);     
   }

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.

Código :

.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);     
   }

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

Código :

.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;  
   }

Especificar los keyframes

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

Código :

@-webkit-keyframes animar{
    0%  { }
     50% { -webkit-transform:translateX(700px) scale(1.2);}
     100% {-webkit-transform:translateX(0px); }
}

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.

Código :

#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;
}

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:

Código :

#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;
}

Recomiendo este tutorial de prefijos automáticos en CSS3.

Gracias a @kinduff por las correcciones

espero les sirva!!