Questa proprietà è nata come motion-path. 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 offset-pathproprietà in CSS definisce un percorso di movimento per un elemento da seguire durante l'animazione. Ecco un esempio che utilizza la sintassi del percorso SVG:
.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"); /* 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"); )Questa proprietà non può essere animata, piuttosto definisce il percorso dell'animazione. Usiamo la motion-offsetproprietà per creare l'animazione. Ecco un semplice esempio di animazione dell'offset di movimento con un'animazione @keyframes:
.thing-that-moves ( 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 ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )Vedi il semplice esempio di penna di animazione lungo un percorso di CSS-Tricks (@ css-tricks) su CodePen.
In questa demo, il cerchio arancione viene animato lungo il percorso offset-pathimpostato in CSS. In realtà abbiamo disegnato quel percorso in SVG con gli stessi identici path()dati, ma non è necessario per ottenere il movimento.
Supponiamo di aver tracciato un percorso funky come questo in alcuni software di editing SVG:
Troveremmo un percorso come:
Il dvalore dell'attributo è ciò che stiamo cercando e possiamo spostarlo direttamente in CSS e usarlo come offset-path:
Vedi Pen zEpLRo di CSS-Tricks (@ css-tricks) su CodePen.
Nota i valori senza unità nella sintassi del percorso. Se stai applicando il CSS a un elemento all'interno di SVG, quei valori di coordinate utilizzeranno il sistema di coordinate impostato all'interno di tale SVG viewBox. Se stai applicando il movimento a qualche altro elemento HTML, quei valori saranno pixel.
Nota anche che abbiamo usato un'immagine di un dito che punta per mostrare come l'elemento viene ruotato automaticamente in modo che sia rivolto in avanti. Puoi controllarlo con offset-rotate:
.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )Valori
Per quanto possiamo dire, path()e nonesono gli unici valori di lavoro per offset-path.
La offset-pathproprietà dovrebbe accettare tutti i seguenti valori.
path(): Specifica un percorso nella sintassi delle coordinate SVGurl: Fa riferimento all'ID di un elemento SVG da utilizzare come percorso di movimentobasic-shape: Specifica una forma in conformità alla specifica CSS Shapes, che include:circle()ellipse()inset()polygon()
Clippy è uno strumento fantastico per generare valori di forma di base, tra l'altro.
none: Non specifica alcun percorso di movimento
Ecco alcuni test:
Vedi il test dei valori del percorso di movimento della penna di CSS-Tricks (@ css-tricks) su CodePen.
Anche dire a un elemento SVG di fare riferimento a un percorso definito con lo stesso SVG tramite url()non sembra funzionare.
Con l'API Web Animations
Dan Wilson ha esplorato alcuni di questi aspetti in Future Use: CSS Motion Paths. Hai accesso a tutte queste stesse cose in JavaScript tramite l'API Web Animations. Ad esempio, supponiamo di aver definito un offset-pathin CSS, puoi comunque controllare l'animazione tramite JavaScript:
Vedi Pen CSS MotionPath di CSS-Tricks (@ css-tricks) su CodePen.
Altri esempi
Dritta! Molti di questi sono stati creati prima del passaggio da motion- * naming a offset- *. Dovrebbe essere abbastanza facile risolverli se sei così incline.
Guarda la penna Whoosh! di Merih Akar (@merih) su CodePen.
Guarda Pen pJarJO di Eric Willigers (@ericwilligers) su CodePen.
Guarda la Pen scalextric car su motion-path di Kseso (@Kseso) su CodePen.
Guarda il Pen CSS Motion Path Airplane di Ali Klein (@AliKlein) su CodePen.
Vedere Pen CSS Animate su SVG Path di 一丝 (@yisi) su CodePen.
Guarda Pen Motion Path Infinity di Dan Wilson (@danwilson) su CodePen.
Vedere Pen CSS Motion Path Spiral di Dan Wilson (@danwilson) su CodePen.
Vedi la penna zGzJYd di 一丝 (@yisi) su CodePen.
Supporto del browser
La offset-pathproprietà è ancora considerata una caratteristica sperimentale al momento della stesura di questo documento. Se l'attuale mancanza di supporto del browser ti rende esitante a usarlo su un progetto, potresti prendere in considerazione l'utilizzo di GSAP per questo livello di animazione, che Sarah copre anche nel suo post. Questo ti offrirà il più ampio supporto del browser al 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.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 46 | 72 | No | 79 | No |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | No |
A partire da Chrome 46 e Opera 33 (e le relative versioni mobili), abbiamo il "supporto iniziale" in Blink (senza flag).
c'è un altro modo per fare ciò?
La nostra Sarah Drasner ha scritto di SMIL, il metodo nativo di SVG per le animazioni, e di come animateMotionviene utilizzato per animare oggetti lungo un percorso SVG. Sembra:
Ma SMIL è stato deprecato! Quindi questo non è raccomandato.
GreenSock è un altro modo, consigliato. Sarah ne parla in GSAP + SVG per utenti esperti: movimento lungo un percorso (SVG non richiesto). Esempio:
Guarda la demo della penna per autoRotate true / false di Sarah Drasner (@sdras) su CodePen.
Informazioni aggiuntive
- Specifiche: Motion Path Module Level 1 Spec
- Raccolta di esempi su CodePen
- Uso futuro: CSS Motion Paths di Dan Wilson
- Percorsi di movimento: passato, presente e futuro di Cassie Evans
- Biglietto WebKit # 139128
- Biglietto Mozilla # 1186329
- Richiesta di funzionalità Microsoft Edge
- Stato della piattaforma Chrome: percorso di movimento CSS e esempio
- MDN: movimento (collegamenti alle altre proprietà correlate)