Transiciones y animaciones

Las transiciones en CSS son la forma de cambiar una o varias propiedades de una etiqueta de tal modo de pasar de un valor original a otro diferente, con un efecto tal que ese cambio no se realiza de manera instantánea sino que demora un cierto tiempo y por lo tanto, parece estar animado.

Lo más simple para ver esto es un ejemplo donde cambiamos el ancho: de un rectángulo; normalmente, podríamos hacer algo así:

<style>
.rectangulo { border: 1px solid #444; margin: 0 auto; height: 100px; }
.rectangulo :hover {width: 450px;}
</style>

<div class="rectangulo"> </div>

Al poner el cursor encima del rectángulo, este se amplia porque cambiamos el valor de width.

Para animarlo con una transición, hacemos lo mismo y agregamos la propiedad transition con los prefijos que por ahora, sigue necesitando para que sea comprendida por los distintos navegadores:

.rectangulo {
  .......
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

El resultado, será el mismo excepto que el cambio, se realizará "lentamente" provocando ese efecto de animación.

Lo mismo podemos hacer con casi cualquier otra propiedad o con varias propiedades simultáneamente:

.rectangulo1 {
  background-color:#000;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
.rectangulo1:hover {
  background-color:#F00;
}

.rectangulo2 {
  background-color: #000;
  background-image: url(UNA_IMAGEN);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0px 0px;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
.rectangulo2:hover {
    background-color: #FFF;
    background-position: right 50%;
    background-size: 100px 100px;
}

Una animación con CSS es algo muy similar ... pero distinto que requiere de dos partes, primero, establecer los datos de esa animación y luego, agregar las propiedades correspondientes en la etiqueta.

Para crear una animación se utiliza @keyframes que, como todas estas nuevas propiedades en desarrollo, requiere que se le adicione un prefijo para cada navegador:

@-moz-keyframes en Firefox
@-webkit-keyframes en Chrome/Safari
@-ms-keyframes en IE10

La sintaxis básica sería:

@keyframes NOMBRE {
  from { ... }
  to  { ... }
}

donde NOMBRE es cualquiera que se nos ocurra y es con lo que la identificaremos luego y debería ser un nombre único para cada una de ellas; from y to contendrán las propiedades iniciales y finales de esa animación; por ejemplo esto crearía una animación que cambie un color de fondo de negro a rojo:

@keyframes recrojo1 {
  from {
    background-color:#000;
  } 
  to {
    background-color:#F00;
  }
}

y esta otra sería igual pero también cambiaría el borde:

@keyframes recrojo2 {
  from {
    background-color:#000;
    border: 0px solid #444;
  } 
  to {
    background-color:#F00;
    border: 15px solid #FF0;
  }
}

Claro que así, tal como está, no pasa nada. Para agregarla a una etiqueta, debemos usar la propiedad animation que tiene varios parámetros, algunos obligatorios y otros optativos:

animation-name es el nombre del keyframe que usaremos
animation-duration es el tiempo que durará esa animación
animation-iteration-count es la cantidad de veces que se ejecutará (por defecto1) y si usamos infinit se repitirá indefinidamente
animation-direction indica si la animación se repetirá de modo normal (desde-hasta desde-hasta ...) o alternará (desde-hasta hasta-desde ...)

Hay otras y se van agregando más y más a medida que los distintos navegadores experimentan con esta cosas pero, con esas es más que suficiente para comenzar a jugar y no volvernos demasiado locos ya que, como todas las otras también requieren el prefijo -moz -webkit o -ms.

Vamos al ejemplo del rectángulo anterior:

@-moz-keyframes recrojo {from {background-color:#000;} to {background-color:#F00;} } /* Firefox */
@-webkit-keyframes recrojo {from {background-color:#000;} to {background-color:#F00;} } /* Chrome */
@-ms-keyframes recrojo {from {background-color:#000;} to {background-color:#F00;} } /* IE10 */
@keyframes recrojo {from {background-color:#000;} to {background-color:#F00;} } /* w3org */

.rectanguloanimado {
  -moz-animation: recrojo 1s infinite alternate; /* Firefox */
  -webkit-animation: recrojo 1s infinite alternate; /* Chrome */
  -ms-animation: recrojo 1s infinite alternate; /* IE10 */
  animation: recrojo 1s infinite alternate; /* w3org */
}

uso esa forma resumida, al igual que puede hacerse con otras propiedades, para ahorra espacio y no tener que escribir:

animation-name: recrojo;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;

con todos sus prefijos, lo cuál, a veces es inevitable.

Como se ve, puesta de ese modo, la animación es permanente y puede ser todo lo compleja que se quiera aunque también es posible colocarla en el evento hover y de esa manera, sólo es lanzada cuando colocamos el cursor encima. Sería similar a las transiciones sólo que podemos repetir el efecto indefinidamente siempre que mantengamos el cursor encima: