Atstumo atstumas - CSS-gudrybės | CSS almanachas 2025

Šis turtas pradėjo gyvenimą kaip motion-offset. Tai ir visos kitos susijusios judesio * ypatybės specifikacijose yra pervadinamos į poslinkį *. Almanache keičiame pavadinimus. Jei norite jį naudoti dabar, tikriausiai geriausia naudoti abi sintakses.

motion-offsetCSS nuosavybė sako: kiek palei motion-pathtu? Tai yra animacinė nuosavybė, susijusi su judėjimo keliais.

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

Ankstesniame pavyzdyje mes nustatėme pradinę motion-offsetvertę 0%, nors verta paminėti, kad nulis yra numatytoji vertė, net jei ji nėra aiškiai apibrėžta (mes galėjome tai palikti).

Kintamieji

offset-distanceNuosavybė priima šias vertes:

length
percentage

Abiem atvejais reikšmė nurodo atstumo nuo kelio pradžios taško (numatytasis parametras yra 0pxarba 0%) iki kelio pabaigos taško ilgį .

Pavyzdys

Šiame pavyzdyje turime du apskritimus, kur vienas mažas apskritimas keliauja didesnio apskritimo keliu.

Čia yra SVG failas, kurį naudojame formoms piešti:

Dabar mes galime nustatyti .markersavo CSS .trackklasę sekti klasės koordinates:

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

Žr. Geoffo Grahamo (@geoffgraham) „CodePen“ paprastą pavyzdį, kaip animuoti kelyje.

Panašiai galime sustabdyti offset-distancevertę 50% ir animacija nukris įpusėjus kelią:

Žr. Geoffo Grahamo (@geoffgraham) „CodePen“ paprastą pavyzdį, kaip animuoti kelyje.

Arba norėdami pagreitinti animacijos greitį, offset-distancevertę galime padauginti iš 300%. Tačiau jei mes nurodėme, kiek laiko animacija veikia didesne verte, nei reikia elementui, norint nueiti kelią, tada judėjimas sustos, kol animacija užbaigs savo intervalą prieš kartodama:

Žr. Geoffo Grahamo (@geoffgraham) „CodePen“ paprastą pavyzdį, kaip animuoti kelyje.

Naršyklės palaikymas

offset-distanceturtas vis dar laikomas eksperimentinis funkcija tuo metu šio raštu ir nėra dokumentai naršyklės pagalba. Tačiau yra motion-pathpalaikymo dokumentacija ir kol kas galime tai naudoti kaip pagrindą.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.