CSS3 Transition

Otra de las características interesantes de CSS3, es que ahora soporta las animaciones cuando hay un cambio de estilo, es decir una transición animada sin necesidad de javascript, ni flash. 

Lo cual nos permite darle un toque animado a nuestras paginas, sin javascript, y de paso de una manera sumamente sensilla.

Soporte de los Navegadores.
Este característica es soportada por Chrome, Firefox, Opera, Safari, IE10. cada uno con su correspondiente prefijo. http://caniuse.com/#feat=css-transitions

Como funciona?
Esta nueva funcionalidad hace que la modificación de las propiedades de un elemento se hagan de manera gradual, y estas modificaciones tienen que ocurrir por un evento o tiene que suceder algo que las desencadene. Para usarlas debemos especificar la duración de la transición en segundos solamente, aparte podemos especificar el delay, el tipo de efecto de la transición: linear, ease, ease-in, ease-out, ease-in-out y cubic-bezier(n,n,n,n) que permite crear nuestra propia animación, ademas también podemos especificar a que propiedad vamos a aplicar cada animación.

Syntax

transition: propiedad duración efecto-transición (delay|initial|inherit);

• Propiedad: es la propiedad a la cual se le va a aplicar la transición.
• Duración el tiempo que va a durar la transición.
• Efecto-transicion: la funcion que se va a aplicar en el tiempo espacio. 
• delay: seria el tiempo que va a tardar la transición en iniciar.
• initial: estable esta propiedad a su valor inicial.
• inherit: hereda la propiedad de su padre.

Funciones

• transition-delay
• transition-duration 
• transition-property
• transition-timing-function

Ejemplo: http://bomba1990.pythonanywhere.com/sosinformatico/js/css3-transition

.prueba{
  width:150px;
  height:100px;
  border:1px solid red;
  margin:30px;
 }
       #prueba1{transition: 1s ease-in-out; }
 #prueba1:hover{
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
 }
       #prueba2{transition: 1s ease-out, width 2s cubic-bezier(.03,1.77,1,-0.67); }
 #prueba2:hover{
                width:500px;
  transform: translate(20px,20px);
  -webkit-transform: translate(20px,20px);
  -moz-transform: translate(20px,20px);
  -o-transform: translate(20px,20px);
 }

Para crear sus propias curvas de animación con la función cubic-bezier les recomiendo: http://cubic-bezier.com