Ruta de desplazamiento - Trucos CSS

Esta propiedad comenzó su vida como motion-path. Esta, y todas las demás propiedades relacionadas con el movimiento *, se renombran como offset- * en la especificación. Estamos cambiando los nombres aquí en el almanaque. Si desea usarlo ahora mismo, probablemente sea mejor usar ambas sintaxis.

La offset-pathpropiedad en CSS define una ruta de movimiento que debe seguir un elemento durante la animación. Aquí hay un ejemplo que usa la sintaxis de la ruta SVG:

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); )

Esta propiedad no se puede animar, sino que define la ruta de la animación. Usamos la motion-offsetpropiedad para crear la animación. Aquí hay un ejemplo simple de animación de desplazamiento de movimiento con una animación @keyframes:

.thing-that-moves ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Vea el ejemplo simple de lápiz de animación a lo largo de una ruta mediante CSS-Tricks (@ css-tricks) en CodePen.

En esta demostración, el círculo naranja se anima a lo largo de offset-pathlo establecido en CSS. De hecho, dibujamos esa ruta en SVG con exactamente los mismos path()datos, pero eso no es necesario para obtener el movimiento.

Digamos que dibujamos un camino funky como este en algún software de edición de SVG:

Encontraríamos un camino como:

El dvalor del atributo es lo que buscamos, y podemos moverlo directamente a CSS y usarlo como offset-path:

Vea el Pen zEpLRo de CSS-Tricks (@ css-tricks) en CodePen.

Tenga en cuenta los valores sin unidades en la sintaxis de la ruta. Si está aplicando el CSS a un elemento dentro de SVG, esos valores de coordenadas usarán el sistema de coordenadas configurado dentro de ese SVG viewBox. Si está aplicando el movimiento a algún otro elemento HTML, esos valores serán píxeles.

También tenga en cuenta que usamos un gráfico de un dedo apuntando para mostrar cómo el elemento se gira automáticamente para que mire hacia adelante. Puedes controlar eso con offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Valores

Lo mejor que podemos decir, path()y noneson los únicos valores de trabajo para offset-path.

Se offset-pathsupone que la propiedad acepta todos los siguientes valores.

path(): Especifica una ruta en la sintaxis de coordenadas SVG
url: Hace referencia al ID de un elemento SVG que se utilizará como ruta de movimiento
basic-shape: Especifica una forma de acuerdo con la especificación de formas CSS, que incluye:
- circle()
- ellipse()
- inset()
- polygon()
Clippy es una herramienta increíble para generar valores de Forma básica, por cierto.
none: No especifica ninguna trayectoria de movimiento

Aquí hay algunas pruebas:

Consulte la prueba de valores de ruta de movimiento del lápiz mediante CSS-Tricks (@ css-tricks) en CodePen.

Incluso decirle a un elemento SVG que haga referencia a una ruta definida por el mismo SVG a través de url()no parece funcionar.

Con la API de animaciones web

Dan Wilson exploró algo de esto en Future Use: CSS Motion Paths. Tiene acceso a todas estas mismas cosas en JavaScript a través de la API de animaciones web. Por ejemplo, digamos que ha definido un offset-pathen CSS, aún puede controlar la animación a través de JavaScript:

Consulte Pen CSS MotionPath de CSS-Tricks (@ css-tricks) en CodePen.

Más ejemplos

¡Aviso! Muchos de estos se crearon antes del cambio de movimiento- * denominación a desplazamiento- *. Debería ser bastante fácil arreglarlos si así lo desea.

Vea el Pen Whoosh! por Merih Akar (@merih) en CodePen.

Vea el Pen pJarJO de Eric Willigers (@ericwilligers) en CodePen.

Vea el coche Pen scalextric en motion-path de Kseso (@Kseso) en CodePen.

Vea el avión de trayectoria de movimiento de CSS de la pluma de Ali Klein (@AliKlein) en CodePen.

Vea Pen CSS Animate en SVG Path por 一丝 (@yisi) en CodePen.

Vea Pen Motion Path Infinity de Dan Wilson (@danwilson) en CodePen.

Vea la Espiral de ruta de movimiento de CSS de la pluma de Dan Wilson (@danwilson) en CodePen.

Vea el Pen zGzJYd de 一丝 (@yisi) en CodePen.

Soporte de navegador

La offset-pathpropiedad todavía se considera una característica experimental en el momento de escribir este artículo. Si la falta actual de compatibilidad con el navegador le hace dudar de usarlo en un proyecto, entonces puede considerar usar GSAP para este nivel de animación, que Sarah también cubre en su publicación. Esto le ofrecerá la más amplia compatibilidad con navegadores en este momento.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
46	72	No	79	No

Móvil / Tablet

Android Chrome	Android Firefox	Androide	Safari de iOS
88	85	81	No

A partir de Chrome 46 y Opera 33 (y las versiones móviles relacionadas), tenemos "soporte inicial" en Blink (sin bandera).

Hay otra manera de hacer esto?

Nuestra propia Sarah Drasner escribió sobre SMIL, el método nativo de SVG para animaciones, y cómo animateMotionse usa para animar objetos a lo largo de una ruta SVG. Parece que:

¡Pero SMIL está siendo desaprobado! Entonces esto no es recomendable.

Sin embargo, GreenSock es otra forma recomendada. Sarah habla de esto en GSAP + SVG para usuarios avanzados: Motion Along A Path (no se requiere SVG). Ejemplo:

Vea la Demostración de Pen para autoRotate true / false de Sarah Drasner (@sdras) en CodePen.