Trayectos animados en CSS - auladigital2.com

Motion Paths en CSS: Cómo animar elementos siguiendo trayectos

CSS nos ofrece la posibilidad de animar elementos a lo largo de un recorrido definido. Esta técnica se conoce como trayectos animados o motion paths, y nos permite establecer caminos visuales que los elementos pueden seguir, generando efectos muy dinámicos y personalizados.

¿Qué necesitamos para animar un trayecto?

Para animar un elemento a lo largo de una ruta, debemos definir dos aspectos clave:

El camino que recorrerá el elemento.
La animación que lo moverá sobre ese trayecto.

Para ello, se utilizan una serie de propiedades CSS que comienzan con offset-, cada una con una función específica:

Propiedad	Función
`offset-path`	Define el recorrido que seguirá el elemento.
`offset-distance`	Marca la posición actual dentro del trayecto.
`offset-position`	Indica el punto inicial del trayecto.
`offset-rotate`	Controla la rotación del elemento a medida que se mueve.
`offset-anchor`	Establece el punto de anclaje desde donde se desplaza el objeto.
`offset`	Es una propiedad resumida que permite definir todo lo anterior.

Cómo definir un trayecto con `offset-path`

La propiedad principal para crear trayectos es offset-path. Con ella, podemos establecer rutas a través de distintas funciones:

Método	Descripción
`none`	No se asigna trayecto alguno (valor por defecto).
`polygon()`	Dibuja una ruta poligonal usando coordenadas X/Y.
`path()`	Permite usar rutas SVG para definir trayectos precisos.
`ray()`	Crea trayectos basados en ángulos circulares.
`url()`	Hace referencia a trayectos definidos en archivos SVG externos.

Ejemplo con `polygon()`

cssCopiarEditar.element {
  --size: 50px;
  width: var(--size);
  height: var(--size);
  background: indigo url("robot.png");
  background-size: cover;
  offset-path: polygon(0 0, 350px 0, 350px 100px, 0 100px);
  animation: move 5s infinite linear;
}

@keyframes move {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

En este ejemplo, el elemento sigue un recorrido rectangular invisible. Gracias a offset-distance, se mueve desde el inicio hasta el final del camino.

Controlar la posición en el recorrido

La propiedad offset-distance es clave para definir cuánto del trayecto ha recorrido el elemento. Funciona muy bien con valores porcentuales, lo cual facilita su uso dentro de @keyframes.

Girar el elemento a lo largo del trayecto

Si queremos que el elemento rote mientras se mueve, usamos offset-rotate. Este valor puede ser:

auto: rota automáticamente en función de la dirección del camino.
auto <ángulo>: aplica una rotación adicional al cálculo automático.
reverse: rota en la dirección opuesta a la normal.
<ángulo>: aplica una rotación fija sin importar el trayecto.

Ejemplo con rotación

cssCopiarEditar@keyframes move {
  0% {
    offset-distance: 0%;
    offset-rotate: 90deg;
  }
  100% {
    offset-distance: 100%;
    offset-rotate: 0deg;
  }
}

Establecer un punto de anclaje con `offset-anchor`

Con offset-anchor determinamos el punto exacto del elemento que se moverá sobre el camino. Puedes usar valores como:

100% 100% → esquina inferior derecha
50% 50% → centro
0% 0% → esquina superior izquierda

Ejemplo con `path()` y anclaje:

cssCopiarEditar.element {
  offset-path: path("m 50 50 h 350 v 100");
  offset-anchor: 50% 50%;
}

Aquí, el punto de referencia del movimiento será el centro del elemento.

Usar `offset` como atajo

Si prefieres una sintaxis más compacta, puedes usar la propiedad abreviada offset, que combina varias de las anteriores:

cssCopiarEditar.box {
  /* offset: path offset-distance offset-rotate / offset-anchor */
  offset: path("m 0 0 h 100 v 200") 0% 45deg / 50% 50%;
}

Esta notación permite establecer rápidamente el camino, la distancia, el ángulo de rotación y el punto de anclaje.

Próximo paso: trayectos circulares

En la siguiente lección aprenderás a trabajar con la función ray(), que permite crear trayectos basados en ángulos, perfectos para animaciones en forma circular o radial.

Motion Paths en CSS: Cómo animar elementos siguiendo trayectos

¿Qué necesitamos para animar un trayecto?

Cómo definir un trayecto con offset-path

Ejemplo con polygon()