¿Qué son las animaciones CSS?

Una animación permite que un elemento cambie gradualmente de un estilo a otro.

Puede cambiar tantas propiedades CSS que desee, tantas veces como se desee.
Para usar animación CSS, primero debe especificar algunos fotogramas clave para la animación.
Los fotogramas clave mantienen qué estilos tendrá el elemento en determinados momentos.

Nota: La propiedad animation-duration define el tiempo que una animación debe llevar para completarse. Si esta propiedad no se especifica , no se producirá ninguna animación, porque el valor predeterminado es 0 (0 segundos).

En el ejemplo anterior hemos especificado cuándo cambiará el estilo utilizando las palabras clave "from" y "to" (que representa 0% (inicio) y 100% (completo)).

También es posible usar los porcentajes. Al usar el porcentaje, pueden agregarse tantos cambios de estilo como se desee desde el rango 0% hasta el 100%..

El siguiente ejemplo cambiará la posición del "div" (en nuestro caso una imagen dentro del div).

El código es muy sencillo, véase:

  .lat{
    position: relative;
    padding: 20px;
    width: 100px;
     animation-name: asd;
     animation-duration: 2s;
}
  @keyframes asd{
    from {top: 800px;}
    to {top: 0px;}

Lo que vemos señalado en azul es la asignación del nombre de la animación. (asd) y su duración (2s).
Dentro del @keyframes es la animación en sí. Como observamos, se moverá con respecto a top (del div padre) desde la posición top 800px a top 0px.