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

CSS3 Transformando elementos.

Una de las nuevas funcionalidades de css3 es que podemos transformar elementos directamente desde el css, las transformaciones que podemos hacer son: escalar, rotar, mover y deformar.

• rotate(grados): nos permite hacer rotar elementos, en grados.
• translate(X,Y): nos permite mover un elemento a partir de su posición original, debemos especificar cuanto se debe mover en el eje de las x y en el eje de las y. 
• scale(x,y): nos permite modificar el tamaño de un elemento, con los argumentos que le pasemos, multiplicara el numero por el tamaño original. 
• skew(grados-x,grados-y): el elemento se gira en un angulo dado, en función a los parámetros dados.

Soporte en los Navegadores:

Esta característica es soportada por Chrome, firefox, ie 9+, opera, pero todos con sus respectivos prefijos.

Ejemplo: http://bomba1990.pythonanywhere.com/sosinformatico/js/css3transform
GITHUB: https://github.com/bomba1990/HTML5-Ejemplos/blob/master/css3/transform.html