CSS Motion Path

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

<div id="motion-demo"></div>
#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

Espedificaciones

Specification Status Comment
Motion Path Module Level 1 Working Draft Initial definition.

Compatibilidad de Browsers

offset property

BCD tables only load in the browser