NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.
En el post previo se comentó la manera de hacer Animaciones con CSS3, en esta ocasión hablaremos de otra forma de generar cambios visuales: Transiciones con CSS3. A diferencia de las animaciones, las transiciones no utilizan "keyframes", sino mas bien son indicaciones de cómo queremos visualizar los cambios (tiempo, propiedades, "easing"), dichos cambios se pueden activas utilizando pseudoselectores CSS como "hover". En el cuadro siguiente se aplicó un efecto donde la anchura y el color cambia al ubicar el mouse sobre el.
Realicemos entonces los pasos para implementar las transiciones.
1.- Coloquemos el elemento al que queremos aplicarle las transiciones y le damos un ID:
<body>
<div id="miDiv">
Este es mi DIV
</div>
</body>
2.- Generamos un estilo inicial para el elemento:
<style>
#miDiv{
width: 150px;
height: 150px;
background-color: #666;
}
</style>
3.- Al aplicar el estilo el elemento queda así:
4.- Después generamos el estilo con los cambios, este estilo se activará con el pseudoselector "hover"
<style>
#miDiv:hover{
width: 250px;
height: 250px;
background-color: #ABC;
}
</style>
5.- Ya con estos estilos nuestro elemento cambia de manera instantánea entre ambos estilos
6.- Finalmente solo es necesario indicar al estilo inicial la transición que queremos aplicar (recordemos los prefijos para cada navegador), en este caso indicamos que la transición dure 2 segundos, quedando así modificado
-webkit-transition: 2s; /*Safari y Chrome*/
-moz-transition: 2s; /*Firefox*/
-ms-transition: 2s; /*Internet Explorer*/
-o-transition: 2s; /*Opera*/
7.- Finalmente nuestro elemento ha quedado con la transición implementada
También podemos hacer ligeras variaciones especificando por ejemplo el tiempo que queremos para cada una de las propiedades que cambiarán:
-webkit-transition: width 3s, height 4s, background-color 3s;
-moz-transition: width 3s, height 4s, background-color 3s;
-ms-transition: width 3s, height 4s, background-color 3s;
-o-transition: width 3s, height 4s, background-color 3s;
O también definir un tiempo de retraso para activar la transición:
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
Inclusive podemos definir el tipo de easing, es decir la forma de hacer la animación, si deseamos que vaya uniforme o que lleve alguna aceleración al principio o al final, etc:
-webkit-transition-timing-function:ease-in;
-moz-transition-timing-function:ease-in;
-ms-transition-timing-function:ease-in;
-o-transition-timing-function:ease-in;
Los valores posibles para este parámetro son:
Siendo ésta última cubic-bezier(n,n,n,n), una opción donde podemos insertar valores entre 0 y 1.
De esta forma complementamos el post anterior de Animaciones con CSS3, de manera que combinando un poco estas características podemos generar efectos que antes sólo se podían realizar con Flash.
Cabe mencionar que estas características también pueden mezclarse con otras herramientas como Javascript o algún framework (JQuery, JQuery Mobile).
Espero sea de utilidad y le saquen provecho.
Felices líneas de código.
En el post previo se comentó la manera de hacer Animaciones con CSS3, en esta ocasión hablaremos de otra forma de generar cambios visuales: Transiciones con CSS3. A diferencia de las animaciones, las transiciones no utilizan "keyframes", sino mas bien son indicaciones de cómo queremos visualizar los cambios (tiempo, propiedades, "easing"), dichos cambios se pueden activas utilizando pseudoselectores CSS como "hover". En el cuadro siguiente se aplicó un efecto donde la anchura y el color cambia al ubicar el mouse sobre el.
Pasa el mouse sobre mi
Realicemos entonces los pasos para implementar las transiciones.
1.- Coloquemos el elemento al que queremos aplicarle las transiciones y le damos un ID:
<body>
<div id="miDiv">
Este es mi DIV
</div>
</body>
2.- Generamos un estilo inicial para el elemento:
<style>
#miDiv{
width: 150px;
height: 150px;
background-color: #666;
}
</style>
3.- Al aplicar el estilo el elemento queda así:
Este es mi DIV
4.- Después generamos el estilo con los cambios, este estilo se activará con el pseudoselector "hover"
<style>
#miDiv:hover{
width: 250px;
height: 250px;
background-color: #ABC;
}
</style>
5.- Ya con estos estilos nuestro elemento cambia de manera instantánea entre ambos estilos
Este es mi DIV
6.- Finalmente solo es necesario indicar al estilo inicial la transición que queremos aplicar (recordemos los prefijos para cada navegador), en este caso indicamos que la transición dure 2 segundos, quedando así modificado
<style>
#miDiv{
width: 150px;
height: 150px;
background-color: #666;
-webkit-transition: 2s; /*Safari y Chrome*/
-moz-transition: 2s; /*Firefox*/
-ms-transition: 2s; /*Internet Explorer*/
-o-transition: 2s; /*Opera*/
}
</style>
7.- Finalmente nuestro elemento ha quedado con la transición implementada
LISTO
También podemos hacer ligeras variaciones especificando por ejemplo el tiempo que queremos para cada una de las propiedades que cambiarán:
-webkit-transition: width 3s, height 4s, background-color 3s;
-moz-transition: width 3s, height 4s, background-color 3s;
-ms-transition: width 3s, height 4s, background-color 3s;
-o-transition: width 3s, height 4s, background-color 3s;
O también definir un tiempo de retraso para activar la transición:
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
Inclusive podemos definir el tipo de easing, es decir la forma de hacer la animación, si deseamos que vaya uniforme o que lleve alguna aceleración al principio o al final, etc:
-webkit-transition-timing-function:ease-in;
-moz-transition-timing-function:ease-in;
-ms-transition-timing-function:ease-in;
-o-transition-timing-function:ease-in;
Los valores posibles para este parámetro son:
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(n,n,n,n)
Siendo ésta última cubic-bezier(n,n,n,n), una opción donde podemos insertar valores entre 0 y 1.
De esta forma complementamos el post anterior de Animaciones con CSS3, de manera que combinando un poco estas características podemos generar efectos que antes sólo se podían realizar con Flash.
Cabe mencionar que estas características también pueden mezclarse con otras herramientas como Javascript o algún framework (JQuery, JQuery Mobile).
Espero sea de utilidad y le saquen provecho.
Felices líneas de código.
Comentarios
Publicar un comentario