Sintassi

Significato dei valori principali:

• lunghezza: Valore in unità di lunghezza CSS, come px, em, rem, ecc., che indica la distanza dall’inizio del percorso.

• percentuale: Valore percentuale tra 0% (inizio percorso) e 100% (fine percorso).

• auto: Valore predefinito, corrisponde a 0%.

Esempio proprietà: offset-distance

Codice Esempio: offset-distance

CODE: CSS

1. .offset-distance-box {

2.   offset-path: path("M20,200 C100,0 300,300 380,100");

3.   offset-distance: 0%;

4.   offset-rotate: auto;

5.   animation: slideAlongPath 5s linear infinite;

6. }

8. @keyframes slideAlongPath {

9.   from {

10.     offset-distance: 0%;

11.   }

12.   to {

13.     offset-distance: 100%;

14.   }

15. }

Contenuto Esempio: offset-distance

  
  <style>
    .offset-distance-box {
      offset-path: path("M20,200 C100,0 300,300 380,100");
      offset-distance: 0%;
      offset-rotate: auto;
      animation: slideAlongPath 5s linear infinite;
    }

    @keyframes slideAlongPath {
      from { offset-distance: 0%; }
      to { offset-distance: 100%; }
    }
  </style>

  <div class="offset-distance-box"></div>
  

✅ Note aggiuntive:

• Deve essere sempre utilizzata insieme a una proprietà valida offset-path per avere effetto.
• È possibile animare il valore per ottenere movimenti fluidi lungo percorsi complessi.
• Supportata in browser moderni come Chrome, Edge e Safari; Firefox è ancora in fase sperimentale.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser