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 puedes definir un "path" específico  de cualquier forma que se quiera. Luego se animará a lo largo de ese "path" animando offset-distance, y variar la rotación en algún punto usando offset-rotate.

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