Sintassi

Significato dei valori principali:

• center: (valore predefinito) Il centro dell’elemento segue il percorso.

• top, bottom, left, right: Specificano un punto preciso del box dell’elemento.

• percentuali: Come 25% 50%, indica una posizione relativa all’elemento.

• auto: Lascia che il browser scelga automaticamente il punto di ancoraggio (default quando non specificato).

Esempio proprietà: offset-anchor

Codice Esempio: offset-anchor

CODE: CSS

1. .offset-anchor-box {

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

3.   offset-distance: 0%;

4.   offset-rotate: auto;

5.   offset-anchor: left bottom;

6.   animation: followPath 4s linear infinite;

7. }

Contenuto Esempio: offset-anchor

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

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

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

✅ Note aggiuntive:

• Richiede un offset-path valido per avere effetto.
• Combinabile con offset-rotate per animazioni visivamente coerenti.
• Compatibilità browser: supportata nei principali browser basati su Chromium e WebKit. 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