Como utilizar Transiciones con CSS

Las Transiciones con CSS o CSS Transitions permiten realizar cambios en los valores de una propiedad durante un determinado tiempo de manera progresiva, esto permite realizar transiciones en las propiedades de un elemento eliminando la necesidad de utilizar Javascript y obteniendo efectos interesantes.

Sintaxis de las Transiciones con CSS

En la especificación del CSS3 se introduce la nueva propiedad transition la cual permite especificar las transiciones con CSS, la sintaxis básica es:

css
  1. .style {
  2.    transition: property time easing;
  3. }

Donde se tiene:

  • property: propiedad a aplicar la transición (color, width, etc).
  • time: tiempo de duración expresado en segundos de la transición.
  • easing: tipo de aceleración de la animación (ease, linear, ease-in, ease-out, ease-in-out).

Obviamente este código solo funciona en navegadores que tienen implementada la especificación CSS3, entonces para que los navegadores actuales puedan interpretarlo hace falta agregar líneas especificas de acuerdo a cada navegador.

css
  1. .style {
  2.     -webkit-transition: property time easing; /* Safari 3.2+, Chrome */
  3.     -moz-transition: property time easing;    /* Firefox 4.0+ */  
  4.     -o-transition: property time easing;      /* Opera 10.5+ */
  5.     transition: property time easing;
  6. }

Esto garantiza que las transiciones se verán correctamente en Chrome, Safari 3.2+, Firefox 4.0+ y Opera 10.5+. En los otros casos (incluyendo Internet Explorer) no se verá la transición solo se verá un cambio brusco entre uno y otro estado.

Ejemplo básico de Uso

Una vez que conocemos la sintaxis, veamos un ejemplo en el cual al pasar el mouse sobre un enlace cambiaremos el color del enlace pero con una pequeña transición del color.

Para comenzar el rollover de un enlace se hace mediante:

css
  1. a {
  2.     color: #06C;
  3. }
  4. a:hover {
  5.     color: #C00;
  6. }

Luego aplicamos la transición al color durante 0.35 segundos, con lo cual tendríamos:

css
  1. a {
  2.     color: #06C;   
  3.     -webkit-transition: color .35s ease-out;  
  4.     -moz-transition: color .35s ease-out;  
  5.     -o-transition: color .35s ease-out;
  6.     transition: color .35s ease-out;
  7. }
  8. a:hover {
  9.     color: #C00;
  10.     -webkit-transition: color .35s ease-in;  
  11.     -moz-transition: color .35s ease-in;  
  12.     -o-transition: color .35s ease-in;
  13.     transition: color .35s ease-in;
  14. }

Como se aprecia hemos aplicado la transición sobre la propiedad color el cual durará 0.35 segundos, además hemos aplicado la transición cuando el mouse pasa sobre el enlace y cuando sale del mismo.

Ejemplo de Menú con CSS Transitions

Como segundo ejemplo crearemos un menú de navegación, en el cual cuando el cursor pasa sobre el elemento cambiaremos el color y el ancho del fondo con lo cual obtendremos un resultado interesante. Para ello primero creamos el código HTML para los elementos del menú.

HTML4
  1. <ul class="menu">
  2.     <li>Home</li>
  3.     <li>Productos</li>
  4.     <li>Ofertas</a></li>
  5.     <li>Contactenos</a></li>
  6. </ul>

Luego, creamos la hoja de estilos en el cual definimos primero las propiedades del elemento de menú y también las propiedades del elemento esta en rollover.

css
  1. .menu li {
  2.     list-style: none;
  3.     padding: 0 0 0 10px;
  4.     width: 200px;
  5.     color: #fff;
  6.     background: #6CF;
  7.    
  8.     -webkit-transition: all .35s ease-in;  
  9.     -moz-transition: all .35s ease-in;  
  10.     -o-transition: all .35s ease-in;
  11.     transition: all .35s ease-in;
  12. }
  13. .menu li:hover {
  14.     background: #06F;
  15.     width: 220px;
  16.    
  17.     -webkit-transition: all .35s ease-out;  
  18.     -moz-transition: all .35s ease-out;  
  19.     -o-transition: all .35s ease-out;
  20.     transition: all .35s ease-out;
  21. }

Notese que hemos utilizado all como propiedad, lo cual indica que se debe hacer la transición sobre todos las propiedades del elemento. Pueden ver el ejemplo funcionando en CSS Transitions Demo.

Ahora solo queda a la creatividad para lograr efectos destacables, por ejemplo en Original Hover Effects with CSS3 pueden ver una lista de ejemplos muy vistosos de rollover utilizando CSS Transitions.

Mas Información

Comentarios Total 6 comentarios


Buscando Casas
Publicado: 24/11/2011 7:23 am

Voy a probarle, no sabia que se podia hacer eso con CSS.

José Alejandro Realza
Publicado: 05/01/2012 2:03 am

Muy clara y concisa la explicacion. Esto es parte del gran poder que trae consigo HTML5

Jhonatan
Publicado: 25/01/2012 10:36 am

Si estimado José .HTML5 aun está muy reciente, pero tenemos que tomar más en serio este lenguaje y aprender a aplicarlo. Ya que en un futuro lo veremos en la mayoría de páginas web y el que no lo aplique se irá quedando atrás.
Saludos
maquetacion web

José Alejandro Realza
Publicado: 04/02/2012 10:51 pm

Claro, esto hará revolucionar la Web como la conocemos, por un lado tenemos que dejaremos de usar jQuery para muchas cosas, las cuales podremos hacer nativamente solo con un par de reglas CSS

cristian │ diseño grafico
Publicado: 24/03/2012 10:03 pm

Wow rpense que ese efecto se lograba solo con java script. Muy bueno realmente. Pero por alguna razon IE9 no muestra CSS3. Sólo yo tengo este problema?? o es algo normal??

cristian │ diseño web
Publicado: 10/04/2012 9:47 am

Que se llegue rapido la nueva Ola del html5 , pero es bueno ir empezando desde ya auque existen frameworks para hacer compatibles con las versiones de IE

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)