Proprietà CSS offset-distance

La proprietà CSS offset-distance imposta quanto un elemento viene spostato lungo il suo percorso di movimento — il percorso definito dalla proprietà offset-path. Pensa a offset-path come al tracciato di una guida, e a offset-distance come alla posizione dell'elemento su quella guida: 0 lo colloca all'inizio, 100% alla fine.

È uno dei componenti fondamentali di CSS Motion Path, che consente a un elemento di percorrere una forma arbitraria (una linea, una curva, un percorso SVG) invece di essere limitato alle transizioni rette con top/left. Da solo offset-distance è statico, ma animarlo da 0 a 100% è ciò che fa scorrere l'elemento lungo il percorso.

Quando usarlo

Animare un elemento lungo un percorso curvo o personalizzato — un aereo che segue una rotta, una perla su un filo, un'icona che traccia un cerchio. Le transizioni CSS rette non possono farlo; un percorso di movimento sì.
Fermare un elemento in un punto specifico del percorso — imposta un valore fisso come offset-distance: 50% per posizionare l'elemento a metà del suo offset-path.
Movimento guidato dallo scroll o dalle interazioni — aggiorna offset-distance con JavaScript (o un'animazione scroll) per muovere un elemento lungo un percorso in risposta all'input dell'utente.

offset-distance non ha effetto se l'elemento non ha anche un offset-path. Senza un percorso non c'è nulla rispetto a cui misurare la distanza.

Valori

Accetta un singolo <length-percentage>:

<length> — una distanza assoluta dall'inizio del percorso, ad es. 40px.
<percentage> — una distanza relativa alla lunghezza totale del percorso. 0% è l'inizio, 100% è la fine.

Il valore iniziale è 0.

Informazione

I valori negativi e superiori al 100% sono validi. Un valore come -20% o 120% estende l'elemento oltre le estremità del percorso; per un percorso chiuso si avvolge attorno. Questo è utile quando si vuole che un elemento inizi fuori dal percorso e vi si animi sopra.

Attenzione

offset-distance fa parte del modulo sperimentale CSS Motion Path. Nelle prime bozze della specifica questa proprietà si chiamava motion-offset. Verifica il supporto attuale dei browser prima di affidarti a essa in produzione.

Proprietà	Valore
Valore iniziale	`0`
Si applica a	Elementi trasformabili
Ereditata	No
Animabile	Sì
Versione	Motion Path Module Level 1
Sintassi DOM	`object.style.offsetDistance = "100%";`

Sintassi

offset-distance: <length-percentage>;

Ad esempio:

/* 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%;
  }
}

Esempi

Animare un elemento lungo un percorso personalizzato

L'elemento sottostante ha un offset-path a forma di curva. Animare offset-distance dal valore predefinito 0 a 100% fa scorrere il riquadro in modo fluido lungo quel percorso. Si noti che offset-rotate: reverse fa sì che il riquadro si orienti nella direzione di marcia.

Esempio rappresentato con Casa e Forbici

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

Provalo tu stesso »

Specificare la distanza come percentuale

Qui il valore si anima come percentuale della lunghezza totale del percorso, quindi l'elemento completa esattamente un passaggio completo indipendentemente dalla lunghezza del percorso. Usare 100% invece di una lunghezza assoluta è il modo più portabile per animare lungo un percorso.

Esempio della proprietà 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>

Provalo tu stesso »

Valori accettati

Valore	Descrizione
`<length-percentage>`	Una lunghezza o percentuale che indica la posizione lungo il percorso offset, misurata dal suo inizio.
`initial`	Imposta la proprietà al suo valore predefinito (`0`).
`inherit`	Eredita il valore dall'elemento genitore.

Proprietà correlate

offset-distance viene raramente usata da sola — funziona insieme alle altre proprietà CSS Motion Path:

offset-path — definisce il percorso lungo cui si muove l'elemento.
offset-rotate — controlla come l'elemento ruota mentre segue il percorso.
offset-anchor — sceglie quale punto dell'elemento viene posizionato sul percorso.
offset — la forma abbreviata che imposta tutte le proprietà motion-path in una volta.
animation — guida i keyframe di offset-distance che producono il movimento.

Esercizio

Pratica

Cosa consente di fare la proprietà CSS 'offset-distance'?

Consente di impostare il gradiente per uno sfondo con gradiente lineare.Consente di definire la distanza lungo il percorso in cui posizionare l'elemento.Consente di impostare un margine tra due elementi.Consente di impostare la rotazione di un elemento.Consente di posizionare un elemento lungo un percorso identificato.