Propiedad offset-distance de CSS

La propiedad offset-distance se utiliza para especificar la posición a lo largo del offset-path.

Acepta los siguientes valores: "length" y "percentages". El valor predeterminado es 0.

INFO

Los valores negativos son válidos.

WARNING

Esta propiedad de desplazamiento es una tecnología experimental.

En las primeras versiones de la especificación, esta propiedad se denominaba motion-offset.

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

Sintaxis

Propiedad CSS offset-distance

css

offset-distance: &lt;length-percentage&gt;;

Ejemplo de la propiedad offset-distance:

Ejemplo representado con Casa y Tijeras

html

<!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>

Try it Yourself »

Ejemplo de la propiedad offset-distance especificada en porcentaje:

Ejemplo de la propiedad CSS offset-distance

html

<!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>

Try it Yourself »

Valores

Valor	Descripción
`<length-percentage>`	Tanto la longitud como el porcentaje especifican la posición inicial del camino de desplazamiento hasta la posición final.

initial	Hace que la propiedad utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

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

Permite establecer el degradado para un fondo con degradado lineal.Permite definir la distancia a lo largo del camino para 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 un camino identificado.

Propiedad offset-distance de CSS ​

Sintaxis ​

Ejemplo de la propiedad offset-distance: ​

Ejemplo de la propiedad offset-distance especificada en porcentaje: ​