En la entrada anterior veíamos como crear un menú sencillo que podíamos usar en nuestra web, dicho menú cambiaba la imagen de fondo, en esta ocasión vamos a utilizar las transiciones en CSS3 para poder crear un menú sencillo que se mueva el fondo al situarnos encima de las opciones del menú.(El Internet Explorer 9 y anteriores no soportan las transiciones y para el Chrome 25, anteriores y Safari hay que añadir -webkit-)

Para crear una transición sencilla en CSS3 se pone:

transition: propiedad tiempo;

Por ejemplo si quiero crear una transición que modifique el ancho de un div  al situarnos con el ratón encima de el pondremos algo parecido a:

div
{
    width:400px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover
{
    width:300px;
}

También podemos especificar como evolucionara la velocidad de la transición en el tiempo. Podemos usar

Linear: misma velocidad al principio que al final.

Ease: empieza lento, continua rapido y termina lento.

Ease-in: animación con un comienzo lento.

Ease-out: animación con una finalización lenta.

Si cogemos como ejemplo la entrada anteriormente mencionada nos daremos cuenta que ya lo tenemos todo preparado, lo único que tenemos que hacer introducir la transición en el estilo menu li a.

.menu li a{
    /*dejamos el código como estaba y añadimos lo de abajo*/
	transition:background-position .5s linear;
	-webkit-transition:background-position .5s linear;
}

Con eso ya tendríamos nuestro menú, el cual cambia el fondo, puedes ver un ejemplo aqui debajo.

Si lo que queremos es que además cambie nuestro texto del menú debemos insertar dicho texto en las imágenes, de forma parecida a la imagen inferior.

A continuación crearíamos el menú con el siguiente código, especificando en cada elemento una clase distintas para poder poner la imagen correspondiente.

<ul class="menu">
    <li> <a href="index.html" class="inicio"><span>Inicio</span></a></li>
    <li> <a href="acercade.html" class="acerca"><span>Acerca de</span></a></li>
    <li> <a href="contacto.html" class="contacto"><span>Contacto</span></a></li>
</ul>

Agregamos el siguiente código CSS para que cada opción de menú quede con su correspondiente imagen:

.inicio{
    background-image:url(inicio.png);
	
}
.acerca{
	background-image:url(acerca.png);
	
}
.contacto{
	background-image:url(contacto.png);
	
}

y luego por último las opciones que harán que se anime dicho menú, este código CSS es el mismo que vimos anteriormente.

.menu{
    list-style:none;
	padding:0px;
	margin:0px;
}
.menu li{
	margin:0px;
	padding:0px;
	float:left;
}
.menu li a{
	display:block;
	width:100px;
	height:30px;
	text-decoration:none;
	transition:background-position .5s linear;
	-webkit-transition:background-position .5s linear;
}
.menu span{
	visibility:hidden;
}
.menu li a:hover{
	background-position:bottom;

}

Debajo podemos ver un ejemplo de como quedaría.