CSS Motion Path

Baseline 2023

Newly available

Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Motion Path es un módulo CSS que permite animar cualquier objeto gráfico a lo largo de una ruta personalizada.

La idea es que cuando se deseaba animar un elemento que se movía a lo largo de un "path", anteriormente solo teniamos las propiedades de animación, posición, etc. a nuestra disposición, lo que no era ideal y solo permitía movimientos simples. Con offset-path (en-US) puedes definir un "path" específico de cualquier forma que se quiera. Luego se animará a lo largo de ese "path" animando offset-distance (en-US), y variar la rotación en algún punto usando offset-rotate (en-US).

Ejemplo básico

html
<div id="motion-demo"></div>
css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

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

Referéncia

Propiedades

Especificaciones

Specification
Motion Path Module Level 1
# offset-path-property

Compatibilidad con navegadores

BCD tables only load in the browser