Son parecidas a las trancisiones pero requieren de una propiedad llamada @KeyFrames
Otra animacion donde al 0% tienen posicion relativa color negro y a la izquierda.
Al 50% se cambia el color verde.
Al 100% se mueve hasta el 80% de la caja y se cambia el color a verde.
Ademas de hacer que se repita las veces que queramos en este caso ponemos infinite con animation-iteration-count: infinite;
animation duration 1s
animation-direction
Tenemos animation-direction: normal reverse y alternate
El primero que es normal quiere decir que va de 0% a 100%
El segundo que es reversa quiere decir que va de 100% a 0%
El tercero que es alternate quiere decir que va de 0% a 100% y luego va de 100% a 0%
El cuarto que es alternate-reverse quiere decir que va de 100% a 0% y luego va de 0% a 100%
animation-fill-mode
Se utiliza para saber la posicion final de nuestra caja
Se queda en la pocision original.
Se queda en la pocision final.
Se queda en la pocision de ambos con both.