Distanza di offset - Trucchi CSS

Questa proprietà è nata come motion-offset. Questa, e tutte le altre proprietà motion- * correlate, vengono rinominate offset- * nelle specifiche. Stiamo cambiando i nomi qui sull'almanacco. Se vuoi usarlo adesso, probabilmente è meglio usare entrambe le sintassi.

La motion-offsetproprietà in CSS dice: a che punto motion-pathsei? Questa è la proprietà animabile associata ai percorsi di movimento.

.thing-that-moves ( /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); motion-offset: 0%; /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Nell'esempio sopra, abbiamo impostato il motion-offsetvalore iniziale a 0%, anche se vale la pena notare che zero è il valore predefinito, anche quando non è esplicitamente definito (avremmo potuto tralasciarlo).

Variabili

La offset-distanceproprietà accetta i seguenti valori:

length
percentage

In entrambi i casi, il valore specifica la lunghezza della distanza dal punto iniziale del percorso (l'impostazione predefinita è 0pxo 0%) al punto finale del percorso.

Esempio

In questo esempio, abbiamo due cerchi in cui un piccolo cerchio viaggia lungo il percorso di un cerchio più grande.

Ecco il file SVG che stiamo usando per disegnare le forme:

Ora possiamo impostare la .markerclasse nel nostro CSS per seguire le .trackcoordinate della classe:

/* The motion-offset is zero by default */ .marker ( offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; ) @keyframes move ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

Vedere l'esempio semplice di penna di animazione lungo un percorso di Geoff Graham (@geoffgraham) su CodePen.

Allo stesso modo, possiamo fermare il offset-distancevalore al 50% e l'animazione scenderà a metà del percorso:

Vedere l'esempio semplice di penna di animazione lungo un percorso di Geoff Graham (@geoffgraham) su CodePen.

Oppure, per controllare la velocità dell'animazione, potremmo moltiplicare il offset-distancevalore al 300% per accelerare le cose. Tuttavia, se abbiamo specificato la quantità di tempo in cui l'animazione viene eseguita a un valore maggiore di quello che impiega l'elemento per percorrere il percorso, il movimento si fermerà finché l'animazione non avrà completato il suo intervallo prima di ripetere:

Vedere l'esempio semplice di penna di animazione lungo un percorso di Geoff Graham (@geoffgraham) su CodePen.

Supporto del browser

la offset-distanceproprietà è ancora considerata una funzionalità sperimentale al momento della stesura di questo documento e non c'è documentazione sul supporto del browser. Tuttavia, esiste la documentazione sul motion-pathsupporto e possiamo usarla come riferimento per il momento.

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.