Offset-path - CSS-Tricks | Almanah CSS 2025

Această proprietate a început viața ca motion-path. Aceasta și toate celelalte proprietăți legate de mișcare * sunt redenumite offset- * în spec. Schimbăm numele aici în almanah. Dacă doriți să îl utilizați chiar acum, probabil cel mai bine este să utilizați ambele sintaxe.

offset-pathProprietatea în CSS definește o cale de circulație pentru un element să urmeze în timpul animației. Iată un exemplu care utilizează sintaxa căii 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"); )

Această proprietate nu poate fi animată, ci mai degrabă definește calea pentru animație. Folosim motion-offsetproprietatea pentru a crea animația. Iată un exemplu simplu de animare a mișcării-offset cu o animație @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 */ ) )

Vedeți Exemplul simplu de animare pe o cale de către CSS-Tricks (@ css-tricks) pe CodePen.

În această demonstrație, cercul portocaliu este animat de-a lungul offset-pathsetului pe care l - am stabilit în CSS. De fapt, am trasat acea cale în SVG cu exact aceleași path()date, dar nu este necesar pentru a obține mișcarea.

Să presupunem că am trasat o cale funky ca aceasta în unele programe de editare SVG:

Am găsi o cale precum:

Valoarea datributului este cea pe care o urmărim și o putem muta direct în CSS și o putem folosi ca offset-path:

Vedeți Pen zEpLRo de CSS-Tricks (@ css-tricks) pe CodePen.

Rețineți valorile fără unitate în sintaxa căii. Dacă aplicați CSS la un element din SVG, acele valori de coordonate vor utiliza sistemul de coordonate configurat în cadrul acelui SVG viewBox. Dacă aplicați mișcarea unui alt element HTML, valorile respective vor fi pixeli.

De asemenea, rețineți că am folosit un grafic al unui deget care arată pentru a arăta modul în care elementul este rotit automat, astfel încât să fie orientat spre înainte. Puteți controla acest lucru cu 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

Cât de bine putem spune path()și nonesunt singurele valori de lucru pentru offset-path.

offset-pathProprietatea ar trebui să accepte toate valorile următoare.

path(): Specifică o cale în sintaxa coordonatelor SVG
url: Face trimitere la ID-ul unui element SVG pentru a fi folosit ca cale de mișcare
basic-shape: Specifică o formă în conformitate cu specificația CSS Shapes, care include:
- circle()
- ellipse()
- inset()
- polygon()
Apropo, Clippy este un instrument minunat pentru generarea valorilor Formei de bază.
none: Nu specifică deloc nici o cale de mișcare

Iată câteva teste:

Vedeți testul valorilor căii de mișcare a stiloului de CSS-Tricks (@ css-tricks) pe CodePen.

Chiar să spui unui element SVG să facă referire la o cale definită prin aceeași SVG url()nu pare să funcționeze.

Cu API-ul Web Animations

Dan Wilson a explorat unele dintre acestea în Future Use: CSS Motion Paths. Aveți acces la toate aceste lucruri în JavaScript prin intermediul API-ului Web Animations. De exemplu, să presupunem că ați definit un offset-pathîn CSS, puteți controla animația în continuare prin JavaScript:

Vedeți Pen CSS MotionPath by CSS-Tricks (@ css-tricks) pe CodePen.

Mai multe exemple

Atenție! Multe dintre acestea au fost create înainte de trecerea de la motion- * naming la offset- *. Ar trebui să fie destul de ușor să le remediați dacă sunteți atât de înclinați.

Vezi Pen Whoosh! de Merih Akar (@merih) pe CodePen.

Vezi Pen pJarJO de Eric Willigers (@ericwilligers) pe CodePen.

Vedeți mașina Scalextric Pen pe mișcare-cale de Kseso (@Kseso) pe CodePen.

A se vedea Pen CSS Motion Path Airplane de Ali Klein (@AliKlein) pe CodePen.

Vezi Pen CSS Animate pe SVG Path de 一丝 (@yisi) pe CodePen.

Vedeți Pen Motion Path Infinity de Dan Wilson (@danwilson) pe CodePen.

Vedeți Spirala Pen Path CSS Motion Path de Dan Wilson (@danwilson) pe CodePen.

Vedeți Pen zGzJYd de 一丝 (@yisi) pe CodePen.

Suport pentru browser

offset-pathProprietatea este considerată încă o funcție experimentală , la momentul scrierii. Dacă actuala lipsă de suport pentru browser vă face să ezitați să îl utilizați într-un proiect, atunci vă recomandăm să utilizați GSAP pentru acest nivel de animație, pe care Sarah îl acoperă și în postarea sa. Acest lucru vă va oferi cel mai larg suport de browser în acest moment.

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom	Firefox	IE	Margine	Safari
46	72	Nu	79	Nu

Mobil / Tabletă

Android Chrome	Android Firefox	Android	Safari iOS
88	85	81	Nu

Începând cu Chrome 46 și Opera 33 (și versiunile mobile aferente), avem „asistență inițială” în Blink (fără semnalizare).

Există o altă modalitate de a face acest lucru?

Propria noastră Sarah Drasner a scris despre SMIL, metoda nativă SVG pentru animații și despre cum animateMotioneste folosit pentru a anima obiecte de-a lungul unei căi SVG. Arată ca:

Dar SMIL este învechit! Deci, acest lucru nu este recomandat.

GreenSock este un alt mod, totuși, este recomandat. Sarah vorbește despre acest lucru în GSAP + SVG pentru utilizatorii avansați: mișcare de-a lungul unei căi (SVG nu este necesar). Exemplu:

Vedeți Demo-ul Pen pentru autoRotate true / false de Sarah Drasner (@sdras) pe CodePen.