Sintassi

Significato dei valori principali:

• auto: (default) Nessuno spostamento aggiuntivo: l’elemento si posiziona esattamente sul percorso, in base al suo punto di ancoraggio predefinito.

• <length> <length>: Indica uno spostamento sull'asse x e y (es. 10px 5px) relativo al punto di partenza del motion path.

Esempio proprietà: offset-position

Codice Esempio: offset-position

CODE: CSS

1. .offset-position-box {

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

3.   offset-distance: 0%;

4.   offset-rotate: auto;

5.   offset-position: 15px 10px;

6.   animation: moveWithOffset 5s linear infinite;

7. }

9. @keyframes moveWithOffset {

10.   from {

11.     offset-distance: 0%;

12.   }

13.   to {

14.     offset-distance: 100%;

15.   }

16. }

Contenuto Esempio: offset-position

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

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

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

✅ Note aggiuntive:

• Utilizzata solo insieme a offset-path e offset-distance.
• Valori di spostamento possono essere positivi o negativi per spostare l’elemento in tutte le direzioni.
• Supporto browser: Chrome, Edge, Safari; Firefox in sperimentazione.

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