Animaciónes con css3

#c1{
width:120px;
color:blue;
height:120px;
border-radius:120px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
-o-border-radius:120px;
background:-moz-linear-gradient(#dedede 0%, #999 100%);
background:-ms-linear-gradient(#dedede 0%, #999 100%);
background:-o-linear-gradient(#dedede 0%, #999 100%);
background:-webkit-linear-gradient(#dedede 0%, #999 100%);
margin:20px 0 0 60px;
} #c2{
width:150px;color:blue;
height:80px;
border-radius: 80px / 55px;
-webkit-border-radius: 80px / 55px;
-moz-border-radius: 80px / 55px;
-o-border-radius: 80px / 55px;
background:-moz-linear-gradient(#dedede 0%, #999 100%);
background:-ms-linear-gradient(#dedede 0%, #999 100%);
background:-o-linear-gradient(#dedede 0%, #999 100%);
background:-webkit-linear-gradient(#dedede 0%, #999 100%);
margin:-90px 0 0 80px;
color:blue;
}
#c3{
width:150px;
height:90px;color:blue;
border-radius: 80px / 50px;
-webkit-border-radius: 80px / 50px;
-moz-border-radius: 80px / 50px;
-o-border-radius: 80px / 50px;
background:-moz-linear-gradient(#dedede 0%, #999 100%);
background:-ms-linear-gradient(#dedede 0%, #999 100%);
background:-o-linear-gradient(#dedede 0%, #999 100%);
background:-webkit-linear-gradient(#dedede 0%, #999 100%);
margin:-90px 0 0 0px;
} @-webkit-keyframes animar{0% { }
50% {
-webkit-transform:translateX(620px) scale(1.2);
}100% {
-webkit-transform:translateX(0px);
} } @-moz-keyframes animar{
0% { } 50% {
-moz-transform:translateX(620px) scale(1.2);
} 100% {-moz-transform:translateX(0px); }
} @-o-keyframes animar{ 0% { }
50% {
-o-transform:translateX(620px) scale(1.2);
} 100% {-o-transform:translateX(0px);
} }
#principal{
-webkit-animation-name: animar;
-webkit-animation-duration: 25s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
-moz-animation-name: animar;
-moz-animation-duration: 20s;
-moz-animation-timing-function: lineal;
-moz-animation-iteration-count:infinite;
-o-animation-name: animar;
-o-animation-duration: 20s;
-o-animation-timing-function: lineal;
-o-animation-iteration-count:infinite;
opacity: 0.6;
margin:-3;
position:absolute;
}
#codigo{background:#DADADA;
border-radius:5px;padding:5px;
}

Animaciónes con css3

Estoy volando!

Hola como están, en esta nueva entrada vamos a ver cómo crear animaaciónes con css3 para darle mas dinamismo a nuestra sitio web. Las animaciónes con css3 son muy bonitas para aquellas personas que quieren darle un toque algo diferente a sus sitios web.

Estas animaciónes con css3 va a constar de crear una nube que se pasee por toda nuestra web de un lado para el otro como la que estás viendo en este momento.

Que se necesita para crear animaciones con css3

Para crear animaciónes con css3 lo que vamos a necesitar es un editor de texto y un poquito de conocimiento sobre HTML y css3 si no sabes no te preocupes que te iré guiando paso a paso. Lo primero que vamos a crear son los div donde estará nuestra nube flotando ya puede ser en una parte especifica de nuestra web yo en este caso la voy a poner en antes de empezar este comentario por lo menos tu tendría que ponerle justamente después del body o en cualquier lado de tu web donde quieras que aparezca.
Entonces los div que crearíamos en nuestro documento HTMLseria los siguiente.

<div id=”principal”>
<div id=”c1″></div>
<div id=”c2″ >¡Estoy volando!</div>
<div id=”c3″></div>
</div>

Si te fijas en el código de los div hemos creado 4 div direferentes un principal que es el que animaremos un secundario que es el C1 un tercero C2 y un cuarto C3 con esto tres últimos creamos el div con la apariencia de una nuve para eso solo tenemos que ponerles los border redondos con un margen de grado bastante amplio en este caso yo voy a trabajar con varios tipos de borde o varios tamaños en px.

Entonces lo primero que creamos es la apariencia de la nube para eso creamos el siguiente código
css3.

#c1{
width:120px;
height:120px;
border-radius:120px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
-o-border-radius:120px;
background-color:rgb(207,230,254);
margin:20px 0 0 60px;
}
#c2{
width:150px;
height:80px;
border-radius: 80px / 55px;
-webkit-border-radius: 80px / 55px;
-moz-border-radius: 80px / 55px;
-o-border-radius: 80px / 55px;
background-color:rgb(207,230,254);
margin:-90px 0 0 80px;
}
#c3{
width:150px;
height:90px;
border-radius: 80px / 50px;
-webkit-border-radius: 80px / 50px;
-moz-border-radius: 80px / 50px;
-o-border-radius: 80px / 50px;
background-color:rgb(207,230,254);
margin:-90px 0 0 0px;
}

si te fijas al agregar este código ya tenemos la apariencia de nuestra nube creada con css3, ahora lo que vamos hacer es a darle vida o animarla, para eso vamos a crear otro código css3 y vamos a llamar el keyframes animar de CSS3. Entonces nuestro código sería el siguiente.

Creando la animaciónes con css3

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

Con este keyframes les indicamos a nuestro div principal hasta que punto queremos que se desplace y hasta qué grado, ahora solo faltaría aplicarle esta animación css3 a nuestro div principal para ello creamos el siguiente código.

Controlando la animaciónes con css3

principal{
-webkit-animation-name: animar;
-webkit-animation-duration: 25s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
-moz-animation-name: animar;
-moz-animation-duration: 20s;
-moz-animation-timing-function: lineal;
-moz-animation-iteration-count:infinite;
-o-animation-name: animar;
-o-animation-duration: 20s;
-o-animation-timing-function: lineal;
-o-animation-iteration-count:infinite;
opacity: 0.6;
margin:-3;
position:absolute;
}

Si te fijas en este código llamamos a la propiedad animation de css3 y le aplicamos el valor animar del keyframes, también le aplicamos el tiempo de duración de la animación en este caso será indefinida porque se le hemos indicado con la propiedad animation-iteration-count:infinite.
Con esto ya tendríamos nuestro código terminado ahora les dejo el código completo solo tiene que copiarlo y probar como les funciona.

<!DOCTYPE html>
<html lang=”es”>
<head>
<title>Animaciónes CSS3</title>
<style type=”text/css”>
#c1{
width:120px;
height:120px;
border-radius:120px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
-o-border-radius:120px;
background-color:rgb(241, 241, 241);
margin:20px 0 0 60px;
 }
 #c2{
width:150px;
height:80px;
 border-radius: 80px / 55px;
-webkit-border-radius: 80px / 55px;
 -moz-border-radius: 80px / 55px;
-o-border-radius: 80px / 55px;
 background-color:rgb(241, 241, 241);
 margin:-90px 0 0 80px; }
 #c3{
 width:150px;
 height:90px;
 border-radius: 80px / 50px;
-webkit-border-radius: 80px / 50px;
 -moz-border-radius: 80px / 50px;
 -o-border-radius: 80px / 50px;
 background-color:rgb(241, 241, 241);
 margin:-90px 0 0 0px;
 }
@-webkit-keyframes animar{0% { } 50% {
 -webkit-transform:translateX(620px) scale(1.2);
}100% {
-webkit-transform:translateX(0px); } }
 @-moz-keyframes animar{
 0% { }
50% { -moz-transform:translateX(620px) scale(1.2);}
100% {-moz-transform:translateX(0px); } }
 @-o-keyframes animar{
0% { }
 50% { -o-transform:translateX(620px) scale(1.2);}
 100% {-o-transform:translateX(0px); } }
 #principal{
 -webkit-animation-name: animar;
-webkit-animation-duration: 25s;
 -webkit-animation-timing-function: lineal;
 -webkit-animation-iteration-count:infinite;
 -moz-animation-name: animar;
-moz-animation-duration: 20s;
 -moz-animation-timing-function: lineal;
-moz-animation-iteration-count:infinite;
-o-animation-name: animar;
 -o-animation-duration: 20s;
 -o-animation-timing-function: lineal;
-o-animation-iteration-count:infinite;
opacity: 0.6;
 margin:-3;
position:absolute;
 color:#00F;
}
</style>
</head>
<body>
 <div id=”principal”>
<div id=”c1″></div>
<div id=”c2″>Estoy volando!</div>
<div id=”c3″></div>
</div>
</body>
</html>

Con esto creo que ya aprendimos a crear animaciónes con css3 suerte y hasta la prixima.

Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios…

Deja un comentario

Tu dirección de correo electrónico no será publicada.