CSS Motion Path

This translation is incomplete. Please help translate this article from English

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
offset-pathChrome Soporte completo 55
Soporte completo 55
Soporte completo 46
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : motion-path
Edge Soporte completo 79
Soporte completo 79
Soporte completo 79
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : motion-path
Firefox Soporte completo 72
Soporte completo 72
Sin soporte 63 — 72
Deshabilitado
Deshabilitado From version 63 until version 72 (exclusive): this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 45
Soporte completo 45
Soporte completo 32
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : motion-path
Safari Sin soporte NoWebView Android Soporte completo 55
Soporte completo 55
Soporte completo 46
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : motion-path
Chrome Android Soporte completo 55
Soporte completo 55
Soporte completo 46
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : motion-path
Firefox Android Soporte completo 63
Deshabilitado
Soporte completo 63
Deshabilitado
Deshabilitado From version 63: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 43
Soporte completo 43
Soporte completo 32
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : motion-path
Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 6.0
Notas
Soporte completo 6.0
Notas
Notas path() is the only value type supported.
Soporte completo 5.0
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : motion-path
Supports the path() function as a valueChrome Soporte completo 64Edge Soporte completo 79Firefox Soporte completo 63IE Sin soporte NoOpera Soporte completo 51Safari Sin soporte NoWebView Android Soporte completo 64Chrome Android Soporte completo 64Firefox Android Soporte completo 63Opera Android Soporte completo 47Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 9.0
Supports the ray() function as a valueChrome Soporte completo 64Edge Soporte completo 79Firefox Soporte completo 71
Deshabilitado
Soporte completo 71
Deshabilitado
Deshabilitado From version 71: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 51Safari Sin soporte NoWebView Android Soporte completo 64Chrome Android Soporte completo 64Firefox Android Sin soporte NoOpera Android Soporte completo 47Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 9.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Usa un nombre no estandar.
Usa un nombre no estandar.