:::: MENU ::::

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:

.style {
   transition: property time easing;
}

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.

.style {
   	-webkit-transition: property time easing; /* Safari 3.2+, Chrome */
	-moz-transition: property time easing;    /* Firefox 4.0+ */  
	-o-transition: property time easing;      /* Opera 10.5+ */
	transition: property time easing;
}

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:

a {
	color: #06C;
}
a:hover {
	color: #C00;
}

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

a {
	color: #06C;	
	-webkit-transition: color .35s ease-out;  
	-moz-transition: color .35s ease-out;  
	-o-transition: color .35s ease-out; 
	transition: color .35s ease-out;
}
a:hover {
	color: #C00;
	-webkit-transition: color .35s ease-in;  
	-moz-transition: color .35s ease-in;  
	-o-transition: color .35s ease-in; 
	transition: color .35s ease-in;
}

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ú.

<ul class="menu">
	<li>Home</li>
    <li>Productos</li>
    <li>Ofertas</a></li>
    <li>Contactenos</a></li>
</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.

.menu li {
	list-style: none;
	padding: 0 0 0 10px;
	width: 200px;
	color: #fff;
	background: #6CF;
	
	-webkit-transition: all .35s ease-in;  
	-moz-transition: all .35s ease-in;  
	-o-transition: all .35s ease-in; 
	transition: all .35s ease-in;
}
.menu li:hover {
	background: #06F;
	width: 220px;
	
	-webkit-transition: all .35s ease-out;  
	-moz-transition: all .35s ease-out;  
	-o-transition: all .35s ease-out; 
	transition: all .35s ease-out;
}

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


8 Comentarios

Publica tu comentario

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;.