animation-name: Siempre recibe el nombre de la animación.
@keyframes squarre { } : Es la animación en la que squarre es el mnombre de la animación y entre llaves escribir la animación, para indicar la animación en la duración indicada se colocan los porcentajes (tiempo relativo a la duración) y dentro colocamos alguna propiedad de css entre llaves.
animation-iteration-count: 2 ; : Inidicamos las veces que se repita la animación.
animation-timing-function: easy ; : Inidicamos como queremos el suavizado de la animación, por defecto esta en easy, pero tenemos otras como easy-in, easy-out, easy-in-out y linear (esta última indica que no haya nigún tipo de suavizado).
animation-timing-function: cubic-bezier(1, 1, 1, 1) ; : Le estaríamos indicando que nuestra animación sea linear.
animation-direction: reverse ; : Le indicamos que empiece en la animación de 100% a 0%. también tenemos el valor alternate y lo que su nombre lo dice, iría con una animación alternada.
animation-fill-mode: forwards ; : Indicamos como va a ser el relleno de mi animación. Con formards se queda con los valores finales de la animación.
animation-play-state: running ; : Verificamos como está el estado de la animación. Por defecto viene con el valor de running pero tenemos también el valor de paused.