Distancia de desplazamiento - Trucos CSS

Esta propiedad comenzó su vida como motion-offset. 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 motion-offsetpropiedad en CSS dice: ¿qué tan avanzado motion-pathestás? Esta es la propiedad animable asociada con las rutas de movimiento.

.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'); motion-offset: 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'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

En el ejemplo anterior, hemos establecido el motion-offsetvalor inicial en 0%, aunque vale la pena señalar que cero es el valor predeterminado, incluso cuando no está definido explícitamente (podríamos haberlo omitido).

Variables

La offset-distancepropiedad acepta los siguientes valores:

length
percentage

En ambos casos, el valor especifica la longitud de la distancia desde el punto de inicio de la ruta (el valor predeterminado es 0pxo 0%) hasta el punto final de la ruta.

Ejemplo

En este ejemplo, tenemos dos círculos donde un círculo pequeño viaja a lo largo de la trayectoria de un círculo más grande.

Aquí está el archivo SVG que estamos usando para dibujar las formas:

Ahora, podemos configurar la .markerclase en nuestro CSS para que siga las .trackcoordenadas de la clase:

/* The motion-offset is zero by default */ .marker ( 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 ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

Vea el ejemplo simple con lápiz de animación a lo largo de una ruta de Geoff Graham (@geoffgraham) en CodePen.

De manera similar, podemos detener el offset-distancevalor al 50% y la animación se reduciría a la mitad de la ruta:

Vea el ejemplo simple con lápiz de animación a lo largo de una ruta de Geoff Graham (@geoffgraham) en CodePen.

O, para controlar la velocidad de la animación, podríamos multiplicar el offset-distancevalor al 300% para acelerar las cosas. Sin embargo, si hemos especificado la cantidad de tiempo que la animación se ejecuta en un valor mayor que el que le toma al elemento recorrer la ruta, entonces el movimiento se detendrá hasta que la animación haya completado su intervalo antes de repetir:

Vea el ejemplo simple con lápiz de animación a lo largo de una ruta de Geoff Graham (@geoffgraham) en CodePen.

Soporte de navegador

la offset-distancepropiedad todavía se considera una característica experimental en el momento de escribir este artículo y no hay documentación sobre la compatibilidad del navegador. Sin embargo, existe documentación sobre motion-pathsoporte y podemos utilizarla como referencia por el 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.