Atskaitos kelias - CSS-gudrybės | CSS almanachas 2025

Šis turtas pradėjo gyvenimą kaip motion-path. 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.

offset-pathCSS nuosavybė apibrėžia judėjimo kelią už elemento sekti animacija metu. Štai pavyzdys, naudojant SVG kelio sintaksę:

.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"); )

Šios ypatybės negalima animuoti, greičiau ji apibrėžia animacijos kelią. Mes naudojame motion-offsetnuosavybę animacijai kurti. Štai paprastas judesio poslinkio animavimo naudojant „@keyframes“ animaciją pavyzdys:

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

Žr. „PenPen“ paprastą pavyzdį, kaip animuoti kelyje naudojant CSS-Tricks (@ css-tricks) „CodePen“.

Šioje demonstracijoje oranžinis apskritimas animuojamas palei offset-pathnustatytą CSS. Mes iš tikrųjų nubrėžėme tą kelią SVG su tais pačiais path()duomenimis, tačiau tai nėra būtina norint gauti judesį.

Tarkime, kad kai kuriose SVG redagavimo programinėse programose mes nupiešėme tokį funky kelią:

Mes rastume tokį kelią:

dAtributo reikšmė yra tai, ką mes po, ir mes galime perkelti jį tiesiai į CSS ir naudoti jį kaip offset-path:

Peržiūrėkite CSS-Tricks „Pen zEpLRo“ (@ css-tricks) „CodePen“.

Kelio sintaksėje atkreipkite dėmesį į vienetines vertes. Jei CSS taikote SVG elementui, toms koordinačių reikšmėms bus naudojama tame SVG nustatyta koordinačių sistema viewBox. Jei judesį taikote kitam HTML elementui, šios vertės bus taškų.

Taip pat atkreipkite dėmesį, kad mes naudojome piršto grafiką, parodantį, kaip elementas yra automatiškai pasuktas, kad jis būtų nukreiptas į priekį. Tai galite kontroliuoti naudodami 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 */ )

Vertybės

Kaip geriausiai galime pasakyti path()ir noneyra vienintelės darbinės vertybės offset-path.

offset-pathNuosavybė turėtų priimti visas šias vertes.

path(): Nurodo kelią SVG koordinačių sintaksėje
url: Nurodo SVG elemento, kuris bus naudojamas kaip judėjimo kelias, ID
basic-shape: Nurodo figūrą pagal CSS formų specifikaciją, į kurią įeina:
- circle()
- ellipse()
- inset()
- polygon()
Beje, „Clippy“ yra nuostabi priemonė „Basic Shape“ vertėms generuoti.
none: Nenurodo jokio judėjimo kelio

Štai keletas testų:

Peržiūrėkite „CSS-Tricks“ (@ css-tricks) „Pen“ judesio kelio verčių testą „CodePen“.

Netgi sakyti, kad SVG elementas nurodo kelią, apibrėžiantį tą patį SVG, url()neatrodo veiksmingas.

Su žiniatinklio animacijų API

Danas Wilsonas išnagrinėjo kai kuriuos dalykus „Future Use: CSS Motion Paths“. Jūs galite pasiekti visus tuos pačius „JavaScript“ elementus per „Web Animations“ API. Pvz., Tarkime, kad offset-pathCSS apibrėžėte a , vis tiek galite valdyti animaciją naudodami „JavaScript“:

Peržiūrėkite „CSS-Tricks“ rašiklį „CSS MotionPath“ (@ css-tricks) „CodePen“.

Daugiau pavyzdžių

Galvas aukštyn! Daugelis jų buvo sukurta prieš pereinant nuo judesio * pavadinimo į ofsetą *. Turėtų būti gana lengva juos išspręsti, jei esate toks linkęs.

Žiūrėkite rašiklį Whoosh! pateikė Merihas Akaras (@merih) „CodePen“.

Žr. Erico Willigerso (@ericwilligers) „Pen pJarJO“, esantį „CodePen“.

Peržiūrėkite Kseso (@Kseso) „CodePen“ „Pen Scalextric“ automobilį judėjimo kelyje.

Peržiūrėkite „Ali Klein“ (@AliKlein) „Pen CSS“ judėjimo kelio lėktuvą „CodePen“.

Žr. „Pen CSS Animate on SVG Path“, by (@yisi) „CodePen“.

Žr. Dan Wilson (@danwilson) „Pen Motion Path Infinity“ iš „CodePen“.

Žr. „Dan CS Wilson“ (@danwilson) „Pen CSS“ judėjimo kelio spiralę „CodePen“.

„CodePen“ žiūrėkite Code (@yisi) „Pen zGzJYd“.

Naršyklės palaikymas

offset-pathTurtas vis dar laikomas eksperimentinis funkcija tuo metu šio raštu. Jei dabartinis naršyklės palaikymo trūkumas verčia jus nesiryžti jį naudoti projekte, galite apsvarstyti galimybę naudoti GSAP tokio lygio animacijai, kurią Sarah taip pat aptaria savo įraše. Tai suteiks jums plačiausią naršyklės palaikymą šiuo metu.

Š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ą.

Darbalaukis

„Chrome“	„Firefox“	T.Y	Briauna	„Safari“
46	72	Ne	79	Ne

Mobilusis / planšetinis kompiuteris

„Android Chrome“	„Android Firefox“	„Android“	„iOS Safari“
88	85	81	Ne

„Chrome 46“ ir „Opera 33“ (ir susijusios mobiliosios versijos) „Blink“ (be žymėjimo) turime „pradinį palaikymą“.

Ar yra kitas būdas tai padaryti?

Mūsų pačių Sarah Drasner rašė apie SMIL, gimtąjį SVG metodą, skirtą animacijoms, ir kaip animateMotionjis naudojamas objektams animuoti SVG kelyje. Atrodo:

Bet SMIL yra nebenaudojamas! Taigi tai nerekomenduojama.

„GreenSock“ yra kitas būdas, kuris yra rekomenduojamas. Sarah apie tai kalba „GSAP + SVG“, skirtoje energijos vartotojams: judėjimas palei kelią (SVG nereikia). Pavyzdys:

Žr. „PenRo Demo“, skirtą Sarah Drasner (@sdras) „AutoRotate true / false“ iš „CodePen“.