Transiciones

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

1. /* Parámetro estándar */
2. transition:
3. 
   
4. /* Parámetros según navegador */
5. -webkit-transition:/* Chrome y Safari */
6. -moz-transition:/* Mozilla */
7. -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

1. /* Estilo de un DIV con la clase TRA */
2. .TRA{

width:100px;

height:100px;

background:#099;

3. }
4. 
   
5. /* Estilo que se aplica al pasar por encima de la DIV con clase TRA */
6. .TRA:hover{

width:200px;

height:200px;

background:#990;

7. }

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. 

Parámetros de transition

Transition tiene distintos parámetros, que se pueden especificar por separado, o juntos (como hace background y background-color, por ejemplo).
El parámetro transition tiene los siguientes parámetros (que después se explicarán por separado): 

1. transition: [Propiedades] [Tiempo] [Función de Tiempo] [Retardo];

Los parámetros que usamos en transition son los siguientes:

Propiedades: En este parámetro establecemos que propiedad queremos que modifique, como width, height... pero solo podemos poner una, por eso se puede usar la la propiedad "all", que sirve para seleccionar todas y se recomienda usarla preferentemente.

Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s".

Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comience lento y una terminación lenta, acelerándose en la parte media.

Retardo: En este parámetro podemos establecer el tiempo que tarda en empezar la transición, en segundos.

Ver Ejemplos en : Transiciones