Explicacion de Animation y Keyframes

Animaciones en CSS3:
Una animación permite a un elemento cambiar gradualmente de un estilo a otro.
Puedes cambiar tantas propiedades CSS como quieras, tantas veces como quieras.
Los fotogramas claves o keyframes registran los estilos que el elemento tendrá a ciertos tiempos.
La regla @keyframes:
Cuando especificas estilos CSS dentro de la regla @keyframes, la animación cambiará gradualmente desde el estilo actual al nuevo estilo en el tiempo especificado.
Para lograr que una animación funcione, debes enlazar la animación a un elemento.
En el siguiente ejemplo se cambia el color de fondo de un elemento (cvander) tres veces: cuando la animación está 50% completada, 70% completada y cuando la animación está 100% completa.
Ejemplo:
https://codepen.io/jguerralla/pen/qKmqeB?editors=1100
"example" es el nombre de la animacion. Puedes escoger cualquier nombre para la animacion.
Como una alternativa al uso de porcentajes, puedes utilizar las palabras clave “from” y “to”, donde:
from es un desplazamiento inicial de 0%
to es un desplazamiento final de 100%.
Los dos ejemplos siguientes son equivalente y producen el mismo resultado:

@keyframes colorchange { 
   0% {background-color: red;} 
   100% {background-color: green;} 
}

@keyframes colorchange { 
   from {background-color: red;} 
   to {background-color: green;} 
}```


Recuerda: Para lograr que una animación funcione, debes enlazar la animación a un elemento. 
En el siguiente ejemplo, la animación dura tres segundos y cambia el color de fondo del elemento div rojo a verde y azul, de forma infinita.
https://codepen.io/jguerralla/pen/RJVKJL
(infinite es un valor de una propiedad de animacion llamada animation-iteration-count que determina el numero de veces que se repite la animacion)
PROPIEDADES DE ANIMATION:
animation-name: Define cuál animación utilizar.  
En este ejemplo, el nombre de la animación es fijado a colorchange, lo cual coincide con los @keyframes definidos:

div {
animation-name: colorchange;
animation-duration: 5s;
}
@keyframes colorchange {
from { width: 0px; }
to { width: 100px; }
}```

IMPORTANTE: Si el nombre de la animación no coincide con ninguna regla de fotogramas clave, la animación no se ejecutará.
documentacion: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name

animation-duration: Especifica la duración de la animación seleccionada en segundos.
IMPORTANTE: Si la propiedad animation-duration no es especificada, la animación no tendrá ningún efecto, porque el valor predeterminado es 0.
Documentacion: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration

animation-timing-function: Especifica la aceleracion o curva de velocidad de una animación. Puede tener los siguientes valores:
ease - especifica una animación con un comienzo lento, luego rápido, luego finaliza lento (este es el predeterminado)
linear - especifica una animación con la misma velocidad de principio a fin
ease-in - especifica una animación con un comienzo lento
ease-out - especifica una animación con un final lento
ease-in-out - especifica una animación con un comienzo y final lento
cubic-bezier(n,n,n,n) - te permite definir tus propios valores en una función cubic-bezier
Por ejemplo: https://codepen.io/jguerralla/pen/vrmxjQ
Documentacion: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

animation-delay : Define el retraso antes de que una animación comienza. La sintaxis CSS se ve así:
animation-delay: 2s;
Ejemplo: https://codepen.io/jguerralla/pen/BVRWba
Documentacion: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
Los valores de animation-delay y animation-duration pueden ser definidos en segundos (s) o milisegundos (ms).

animation-iteration-count: Determina el número de veces que una animación se repite. Por ejemplo, puedes fijar la animación para que se ejecute 5 veces:
https://codepen.io/jguerralla/pen/qKmrzM
Para hacer que la animación se repita para siempre, sólo utiliza el valor “infinite” (infinito):
https://codepen.io/jguerralla/pen/gKWWbO
Documentacion: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
IMPORTANTE: Si utilizas 0 o un número negativo para la propiedad animation-iteration-count, la animación jamás arrancará.

animation-direction: indica cómo debe aplicarse el fotograma clave.
Los valores pueden ser establecidos como:
normal - el valor por defecto, que significa que se reproduce hacia adelante desde 0 % hasta 100%.
reverse - reproduce el fotograma clave en una dirección opuesta desde 100 % hasta 0%.
alternate - la animación primero se ejecuta hacia adelante, luego hacia atrás, luego hacia adelante.
alternate reverse - la animación primero se ejecuta hacia atrás, luego hacia adelante, luego hacia atrás.
Ejemplo: https://codepen.io/jguerralla/pen/WyjjGR
Documentacion: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

Como usar animation con la sintaxis corta:
Observa este ejemplo.
https://codepen.io/jguerralla/pen/WyjjGR
Una sola propiedad animation puede ser utilizada para lograr el mismo resultado:
https://codepen.io/jguerralla/pen/Qxvvvv
MUCHO CUIDADO: El orden en el cual cada propiedad es declarada en la declaración abreviada es importante y no puede ser alterado, o la animación no funcionará de la forma correcta.