Sintassi

Significato dei valori principali:

• offset-position: (opzionale) imposta la posizione iniziale dell'elemento rispetto al contenitore (auto, 10px 20px, ecc.).

• offset-path: definisce il percorso di movimento (es. path(), ray(), none).

• offset-distance: specifica quanto l’elemento si è spostato lungo il percorso (0% fino a 100% o px).

• offset-rotate: definisce la rotazione dell’elemento lungo il percorso (auto, reverse, 45deg, ecc.).

• offset-anchor: (opzionale) punto di ancoraggio interno dell’elemento rispetto al percorso (auto, top left, ecc.).

Esempio proprietà: offset

Codice Esempio: offset

CODE: CSS

1. @keyframes moveAlongPath {

2.   to {

3.     offset-distance: 100%;

4.   }

5. }

7. .offset-example {

8.   width: 50px;

9.   height: 50px;

10.   background-color: #007acc;

11.   position: absolute;

12.   offset: path("M0,0 L300,0 L300,200 L0,200 Z") auto;

13.   animation: moveAlongPath 5s linear infinite;

14. }

16. .offset-container {

17.   position: relative;

18.   width: 320px;

19.   height: 240px;

20.   background-color: #f0f0f0;

21.   border: 1px dashed #999;

22.   margin: 20px 0;

23. }

Contenuto Esempio: offset

<style>
  @keyframes moveAlongPath {
    to {
      offset-distance: 100%;
    }
  }

  .offset-example {
    width: 50px;
    height: 50px;
    background-color: #007acc;
    position: absolute;
    offset: path("M0,0 L300,0 L300,200 L0,200 Z") auto;
    animation: moveAlongPath 5s linear infinite;
  }

  .offset-container {
    position: relative;
    width: 320px;
    height: 240px;
    background-color: #f0f0f0;
    border: 1px dashed #999;
    margin: 20px 0;
  }
</style>

<div class="offset-container">
  <div class="offset-example"></div>
</div>

✅ Note aggiuntive:

• Supporto browser: le proprietà offset-* e la shorthand offset sono ben supportate in Chrome, Edge e Safari. In Firefox il supporto è presente, ma può richiedere l'attivazione del flag layout.css.motion-path.enabled in about:config.
• Sinonimo storico: nelle prime bozze delle specifiche si usava motion-path, ma oggi è considerato deprecato. Il nome ufficiale è offset-path.

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