CSS nos permite poder crear animaciones con el objeto de poder darle algun tipo de movimiento a los elementos dentro de la página web. Para eso debemos utilizar una serie de propiedades que acá vamos a ver:

transform-origin

Lo primero que debemos hacer es declarar desde donde va a arrancar nuestra animación, es decir desde que punto del elemento. Para eso se utiliza la propiedad transform-origin. Esta indica desde que punto la transición va a ocurrir. Acepta diferentes tipos de valores:

• Keywords: es posible pasarle como valores palabras claves para poder ubicar el punto de inicio de la animacion. Las keywords disponibles son top, bottom, left, right y center.
• X-offset / y-offset: podemos pasarle el lugar exacto donde queremos que empiece utilizando como coordenadas los ejes x e y de ubicación. El eje x es el horizontal y el y es vertical.

ATENTI

Es posible combinar keywords con valores de offset.

Algunos ejemplos visuales

Queremos que el eje del movimiento sea en la parte superior izquierda del elemento

transform-origin:top left;

Como vemos, el movimiento comienza desde el punto que le pasamos en transform-origin

Queremos ahora que el elemento comience a moverse a 40px del eje x y a 100px del eje y

transform-origin:40px 100px;

Como se señala en la imagen, el movimiento empieza desde ese punto.

Tipo de animación

Los tipos de animación se realizan con transform. Podes fijarte mas informacion sobre esta propiedad en la pagina correspondiente o poder chequearlo acá https://developer.mozilla.org/en-US/docs/Web/CSS/transform

@keyframes

Ya tenemos desde donde comenzará la animación y que tipo de animación será. Es hora de ponernos a hacer la animacion propiamente dicha. Para eso utilizamos el evento keyframes que define como se moverá la animación desde el punto 0 al punto final. Su sintaxis es similar a esta: