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!!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

body{ background-color:rgb(95, 209, 237); } @keyframes animar{ 0% { } 50% { transform:translateX(700px) scale(1.2);} 100% {transform:translateX(0px); } } .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; } #sq{ animation-name: animar; animation-duration: 20s; animation-timing-function: lineal; animation-iteration-count:infinite; opacity: 0.6; margin:0; position:absolute; } #sq2{ animation-name: animar; animation-duration: 15s; animation-timing-function: lineal; animation-iteration-count:infinite; opacity: 0.4; position:absolute; margin:30px 0 0 0; } #sq3{ animation-name: animar; animation-duration: 12s; animation-timing-function: lineal; animation-iteration-count:infinite; opacity: 0.7; position:absolute; margin:100px 0 0 50px; }

Animación de nubes con CSS3

Dibujar una nube con CSS3

Especificar los keyframes

Aplicar la animación

Publica tu comentario

o puedes...