Offset-distance - CSS-Tricks | Almanah CSS 2025

Această proprietate a început viața ca motion-offset. 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.

motion-offsetProprietatea în CSS spune: cât de departe de-a lungul motion-pathesti? Aceasta este proprietatea animabilă asociată cu căile de mișcare.

.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 */ ) )

În exemplul de mai sus, am stabilit motion-offsetvaloarea inițială la 0%, deși merită remarcat faptul că zero este valoarea implicită, chiar și atunci când nu este definită în mod explicit (am fi putut să lăsăm asta).

Variabile

offset-distanceProprietatea acceptă următoarele valori:

length
percentage

În ambele cazuri, valoarea specifică lungimea distanței de la punctul de pornire al căii (implicit este 0pxsau 0%) până la punctul final al căii.

Exemplu

În acest exemplu, avem două cercuri în care un cerc mic călătorește de-a lungul căii unui cerc mai mare.

Iată fișierul SVG pe care îl folosim pentru a desena formele:

Acum, putem seta .markerclasa în CSS pentru a urma .trackcoordonatele clasei:

/* 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%; ) )

Vedeți Exemplul simplu de animare de-a lungul unei cărți de Geoff Graham (@geoffgraham) pe CodePen.

În mod similar, putem opri offset-distancevaloarea la 50%, iar animația ar scădea la jumătatea căii:

Vedeți Exemplul simplu de animare de-a lungul unei cărți de Geoff Graham (@geoffgraham) pe CodePen.

Sau, pentru a controla viteza animației, am putea înmulți offset-distancevaloarea la 300% pentru a accelera lucrurile. Cu toate acestea, dacă am specificat cantitatea de timp în care animația rulează la o valoare mai mare decât cea necesară elementului pentru a parcurge calea, atunci mișcarea se va opri până când animația își va completa intervalul înainte de a repeta:

Vedeți Exemplul simplu de animare de-a lungul unei cărți de Geoff Graham (@geoffgraham) pe CodePen.

Suport pentru browser

offset-distanceproprietatea este considerată încă o funcție experimentală , la momentul scrierii și nu există nici o documentație pe suport de browser. Cu toate acestea, există documentație privind motion-pathasistența și o putem folosi ca bază pentru 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.