Transiciones de CSS3
Esta documentación explica como hacer transiciones sutiles y fáciles
El parámetro transition es un parámetro de CSS3 y CSS2 UI, es decir, que lo implementan navegadores por separado.
Para usarlo hay la forma estándar establecida por W3 y las propias de los navegadores, por ese motivo por motivos de compatibilidad mejor establecer todas juntas, ya que si una no funciona otra si lo hará.
La mayoría de los navegadores son compatible, pero Internet Explorer no (en su versión 9).
/* Parámetro estándar */
transition:
/* Parámetros según navegador */
-webkit-transition:/* Chrome y Safari */
-moz-transition:/* Mozilla */
-o-transition:/* Opera */
Como funciona
Realmente lo que hace este parámetro es detectar los cambios en el estilo, ya sea añadirle un estilo o sea una modificación por pasar por encima (:hover).
Realmente coge el parámetro anterior y pasa al siguiente de forma progresiva en el tiempo establecido.
Debe de establecerse el transition en el elemento origen, no es recomendable hacerlo en el destino (:hover) o cambiando la clase.
Este es un ejemplo de estilos con transition y su procedimiento
/* Estilo de un DIV con la clase TRA */
.TRA{
width:100px;
height:100px;
background:#099;
}
/* Estilo que se aplica al pasar por encima de la DIV con clase TRA */
.TRA:hover{
width:200px;
height:200px;
background:#990;
}
Con el código de arriba añadiéndole una transición aumentaría de tamaño progresivamente el DIV y cambiaría su color de fondo también de forma progresiva.