Animaciones en CSS3

#anime1{
width:20em;
height:3em;
background-color:#1FA2E1;
transition: height 1s;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-o-transition:height 1s;
}
#anime1:hover {
width:20em;
height:15em;
}
#anime2 {
background-color:#ff9d1c;
width:20em; height:3em;
border-radius:3px;
transition: background 2s;
-webkit-transition: background 2s;
-moz-transition: background 2s;
-o-transition: background 2s;
}
#anime2:hover {
background-color:#1FA2E1;
}
#anime3 {
background-color:#1FA2E1;
width:7em;
border-radius:3px;
height:7em;
text-align:center;
padding:5px;
transition: border-radius 2s;
-webkit-transition: border-radius2s;
-moz-transition: border-radius 2s;
-o-transition: border-radius 2s;
}
#anime3:hover {
border-radius:7em;
-webkit-border-radius:7em;
-moz-border-radius:7em;
-o-border-radius:7em;
}
#codigo{
background:#F1F1F1;
border:solid 1px F9F9F9;
width:400px;

Animaciones en CSS3

Buenas amigos como le prometí en la entrada pasada ahora les voy a enseñar cómo hacer animaciones en CSS3 o mejor dicho hacer animaciones o transsiciones con CSS3, en este tutorial les voy a enseñar tres tipos de animaciones con CSS3 que se pueden realizar con este lenguaje, aunque hay muchas más pero estas me han parecido más interesantes. Esta vez lo que vamos hacer son tres DIV con transformación que al pasar el mouse por encima de ellas vamos a vamos a poder ver el efecto. Bueno como no me gusta hablar mucho empecemos hacer nuestras
Lo primero que vamos hacer es crear un DIV con el id anime1 quedando de la siguiente manera

<div id=”anime1″>
Pasa el mouse
</div>

Ahora les creamos los atributos css3 para su tamaño y el código quería así

  #anime1{ width:20em;
height:5em;
background-color:#1FA2E1;
transition: width 1s;
-webkit-transition: width 1s; /*Gogole Chrome, safari*/ -moz-transition: width 1s; /*Mozilla Firefox*/ -o-transition:width 1s; /*Opera*/}

Con esto ya declarado le establecemos el atributo hover para cuando pasemos por encima con el mouse se aplique la transformación  el código CSS3 seria este

#anime1: hover {
Width: 30em;
}

Y si copiaste todo el código correcto nuestra figura tiene que estar como la siguiente

Pasa el mouse

Vamos a crear otro efecto para que el color del hover cambien gradual meente y no al instante o sea para que el mouse hover tenga una transición al momento de cambiar de color nuestro código será el siguiente

Primero creamos el DIV

<div id=”anime2″>
Pasa el mouse
</div>
Ahora escribimos los atributos CSS 3 que quedaría algo así

 #anime2 {
background-color:#ff9d1c;
width:20em;
height:3em;
border-radius:3px;
transition: background 2s;
-webkit-transition: background 2s;
-moz-transition: background 2s;
-o-transition: background 2s;
}
#anime2:hover {
background-color:#1FA2E1;
}

Y nuestra figura sería la siguiente

Pasa el mouse

Ahora creamos un efecto que hace un div redondo al pasar el mouse por encima

Primero creamos el div

<div id=”anime3″>
Pasa el mouse
</div>

Ahora los atributos CSS3

#anime3 {
background-color:#1FA2E1;
width:7em;
border-radius:3px;
height:7em;
text-align:center;
padding:5px;
transition: border-radius 2s;
-webkit-transition: border-radius2s;
-moz-transition: border-radius 2s;
-o-transition: border-radius 2s;
}
#anime3:hover {
border-radius:7em;
-webkit-border-radius:7em;
-moz-border-radius:7em;
-o-border-radius:7em;
}

Bueno y nuestra figura en este caso sería la siguiente, si quieren cambiar la velocidad de la transition solo tienen que 2s por los segundo que quieren que dure su transition..

Pasa el mouse

Nuestro codigo completo seria el siguiente

<!DOCTYPE html>
 <html lang=”es”>
<head>
     <meta charset=”utf-8″ />
     <title> Transition con CSS3 </title>
      <style>
     #anime1{
            width:20em;
            height:5em;
            background-color:#1FA2E1;
            transition: width 1s;
           -webkit-transition: width 1s; /*Gogole Chrome, safari*/
           -moz-transition: width 1s; /*Mozilla  Firefox*/ 
           -o-transition:width 1s; /*Opera*
         }       
    #anime1: hover {
                          Width: 30em;
                } 
 #anime2 {
           background-color:#ff9d1c;
            width:20em;
           height:3em;
           border-radius:3px;
          transition: background 2s;
          -webkit-transition: background 2s;
          -moz-transition: background 2s;
          -o-transition: background 2s;
            }
#anime2:hover {
            background-color:#1FA2E1;
           }
#anime3 {
             background-color:#1FA2E1;
             width:7em;
             border-radius:3px;
             height:7em;
            text-align:center;
            padding:5px;
           transition: border-radius 2s;
          -webkit-transition: border-radius2s;
         -moz-transition: border-radius 2s;
        -o-transition: border-radius 2s;
         }
#anime3:hover {
           border-radius:7em;
           -webkit-border-radius:7em;
           -moz-border-radius:7em;
          -o-border-radius:7em;
        }
    </style>
</head>

<body>

 <div id=”anime1″>Pasa el mouse</div>
 <div id=”anime1″>Pasa el mouse</div>
 <div id=”anime1″>Pasa el mouse</div>

</body>
</html>

Bueno con esto terminamos nuestro clases de hoy esperamos y les guste y le pueda servir para algo saludos y espero sus comentarios… 

Deja un comentario

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