Propiedad CSS offset-distance

La propiedad CSS offset-distance establece qué tan lejos se desplaza un elemento a lo largo de su trayectoria de movimiento — la trayectoria definida por la propiedad offset-path. Piensa en offset-path como el trazado de un carril, y en offset-distance como la posición del elemento sobre ese carril: 0 lo coloca al inicio, 100% al final.

Es uno de los bloques fundamentales de CSS Motion Path, que permite que un elemento recorra una forma arbitraria (una línea, una curva, una ruta SVG) en lugar de limitarse a transiciones rectas con top/left. Por sí sola, offset-distance es estática, pero animarla de 0 a 100% es lo que hace que el elemento se deslice a lo largo de la trayectoria.

Cuándo usarla

Animar un elemento a lo largo de una trayectoria curva o personalizada — un avión siguiendo una ruta, una cuenta en un hilo, un icono trazando un círculo. Las transiciones CSS rectas no pueden hacer esto; una trayectoria de movimiento sí puede.
Pausar un elemento en un punto específico de la trayectoria — establece un valor fijo como offset-distance: 50% para colocar el elemento a la mitad de su offset-path.
Movimiento controlado por desplazamiento o interacción — actualiza offset-distance con JavaScript (o una animación de desplazamiento) para mover un elemento a lo largo de la trayectoria en respuesta a la entrada del usuario.

offset-distance no tiene efecto a menos que el elemento también tenga un offset-path. Sin una trayectoria no hay nada contra lo que medir la distancia.

Valores

Acepta un único <length-percentage>:

<length> — una distancia absoluta desde el inicio de la trayectoria, p. ej. 40px.
<percentage> — una distancia relativa a la longitud total de la trayectoria. 0% es el inicio, 100% es el final.

El valor inicial es 0.

Información

Los valores negativos y superiores al 100% son válidos. Un valor como -20% o 120% extiende el elemento más allá de los extremos de la trayectoria; en una trayectoria cerrada, da la vuelta. Esto es útil cuando quieres que un elemento empiece fuera de la trayectoria y se anime hacia ella.

Advertencia

offset-distance forma parte del módulo experimental CSS Motion Path. En los primeros borradores de la especificación, esta propiedad se llamaba motion-offset. Verifica la compatibilidad actual con los navegadores antes de usarla en producción.

Propiedad	Valor
Valor inicial	`0`
Aplicable a	Elementos transformables
Heredable	No
Animable	Sí
Versión	Motion Path Module Level 1
Sintaxis DOM	`object.style.offsetDistance = "100%";`

Sintaxis

offset-distance: <length-percentage>;

Por ejemplo:

/* A fixed point partway along the path */
offset-distance: 70%;

/* Absolute distance from the start */
offset-distance: 50px;

/* Animate from start to end of the path */
@keyframes move {
  to {
    offset-distance: 100%;
  }
}

Ejemplos

Animar un elemento a lo largo de una trayectoria personalizada

El elemento a continuación tiene un offset-path con forma de curva. Animar offset-distance desde su valor predeterminado 0 hasta 100% desliza el cuadro suavemente a lo largo de esa trayectoria. Ten en cuenta que offset-rotate: reverse hace que el cuadro gire para mirar en la dirección de desplazamiento.

Ejemplo representado con Casa y Tijeras

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 80px;
        height: 80px;
        background: linear-gradient(#eee 50%, #1c87c9 50%);
        position: absolute;
        left: 20%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <div class="mover"></div>
  </body>
</html>

Pruébalo tú mismo »

Especificar la distancia como porcentaje

Aquí el valor se anima como porcentaje de la longitud total de la trayectoria, de modo que el elemento completa exactamente un recorrido completo sin importar la longitud de la trayectoria. Usar 100% en lugar de una longitud absoluta es la forma más portátil de animar a lo largo de una trayectoria.

Ejemplo de la propiedad CSS offset-distance

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .scissorHalf {
        offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
        animation: followpath 4s linear infinite;
      }
      @keyframes followpath {
        to {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-distance property example</h2>
    <svg class="box" width="700" height="450" viewBox="350 0 1400 900">
      <title>House and Scissors</title>
      <rect x="595" y="423" width="610" height="377" fill="#1c87c9" />
      <polygon points="506,423 900,190 1294,423" fill="#8ebf42" />
      <polygon points="993,245 993,190 1086,190 1086,300" fill="#666" />
      <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" />
      <path id="secondScissorHalf" class="scissorHalf" d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" />
    </svg>
  </body>
</html>

Pruébalo tú mismo »

Valores aceptados

Valor	Descripción
`<length-percentage>`	Una longitud o porcentaje que indica la posición a lo largo de la trayectoria de desplazamiento, medida desde su inicio.
`initial`	Establece la propiedad en su valor predeterminado (`0`).
`inherit`	Hereda el valor del elemento padre.

Propiedades relacionadas

offset-distance rara vez se usa sola — funciona junto con las demás propiedades de CSS Motion Path:

offset-path — define la trayectoria por la que viaja el elemento.
offset-rotate — controla cómo rota el elemento mientras sigue la trayectoria.
offset-anchor — elige qué punto del elemento se coloca sobre la trayectoria.
offset — la propiedad abreviada que establece todas las propiedades de motion path a la vez.
animation — impulsa los fotogramas clave de offset-distance que producen el movimiento.

Práctica

¿Qué te permite hacer la propiedad CSS 'offset-distance'?

Permite establecer el degradado para un fondo de degradado lineal.Permite definir la distancia a lo largo de la trayectoria donde se posicionará el elemento.Permite establecer un margen entre dos elementos.Permite establecer la rotación de un elemento.Permite colocar un elemento a lo largo de una trayectoria identificada.