Offsetová cesta - Triky CSS | Almanach CSS 2025

Táto vlastnosť začala život ako motion-path. Toto a všetky ďalšie súvisiace vlastnosti motion- * sa v spec. Premenujú na offset- *. Meníme mená tu v almanachu. Ak ju chcete použiť práve teraz, pravdepodobne bude najlepšie použiť obidve syntaxe.

offset-pathVlastnosť CSS definuje pohybová cesta pre prvok nasledovať počas animácie. Tu je príklad použitia syntaxe cesty 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"); )

Túto vlastnosť nemožno animovať, skôr definuje cestu pre animáciu. motion-offsetVlastnosť používame na vytvorenie animácie. Tu je jednoduchý príklad animácie posunutia pohybu pomocou animácie @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 */ ) )

Pozrite si jednoduchý príklad pera animácie pozdĺž cesty pomocou CSS-Tricks (@ css-tricks) na CodePen.

V tejto ukážke sa oranžový kruh animuje pozdĺž toho, čo offset-pathsme nastavili v CSS. Túto cestu sme v skutočnosti nakreslili do SVG s úplne rovnakými path()údajmi, ale na získanie pohybu to nie je potrebné.

Povedzme, že sme v nejakom softvéri na úpravu SVG nakreslili funky cestu, ako je táto:

Našli by sme cestu ako:

O dhodnotu atribútu sa chystáme, a môžeme ho presunúť priamo do CSS a použiť ho ako offset-path:

Prezrite si pero zEpLRo od CSS-Tricks (@ css-tricks) na stránkach CodePen.

Poznamenajte si hodnoty bez jednotky v syntaxi cesty. Ak aplikujete CSS na prvok v SVG, tieto hodnoty súradníc použijú súradnicový systém nastavený v týchto SVG viewBox. Ak použijete pohyb na iný prvok HTML, budú týmito hodnotami pixely.

Tiež sme si všimli, že sme použili grafiku ukazovania prstom, aby sme ukázali, ako sa prvok automaticky otáča tak, aby smeroval dopredu. Môžete to ovládať pomocou 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 */ )

Hodnoty

Najlepšie, ako vieme, path()a nonesú jedinými pracovnými hodnotami pre offset-path.

Toto offset-pathubytovacie zariadenie akceptuje všetky nasledujúce hodnoty.

path(): Určuje cestu v syntaxi súradníc SVG
url: Odkazuje na ID prvku SVG, ktorý sa má použiť ako dráha pohybu
basic-shape: Určuje tvar v súlade so špecifikáciou Tvary CSS, ktorá obsahuje:
- circle()
- ellipse()
- inset()
- polygon()
Clippy je mimochodom úžasný nástroj na generovanie hodnôt základného tvaru.
none: Neuvádza vôbec žiadnu dráhu pohybu

Tu je niekoľko testov:

Pozrite si test hodnôt dráhy pohybu pera od CSS-Tricks (@ css-tricks) na CodePen.

url()Zdá sa, že nefunguje ani to, keď poviete prvku SVG, aby odkazoval na cestu definovanú tým istým SVG .

S API pre webové animácie

Dan Wilson niečo z toho preskúmal v dokumente Future Use: CSS Motion Paths. Ku všetkým rovnakým veciam v JavaScripte máte prístup prostredníctvom rozhrania Web Animations API. Povedzme napríklad, že ste definovali offset-pathznak CSS, napriek tomu môžete animáciu ovládať pomocou kódu JavaScript:

Prezrite si pero CSS MotionPath od CSS-Tricks (@ css-tricks) na CodePen.

Ďalšie príklady

Hlavy hore! Mnoho z nich bolo vytvorených pred zmenou z motion- * pomenovania na offset- *. Malo by byť celkom ľahké ich opraviť, ak máte taký sklon.

Pozri Pen Whoosh! autor: Merih Akar (@merih) na stránke CodePen.

Prezrite si pero pJarJO od Erica Willigersa (@ericwilligers) na stránke CodePen.

Prezrite si auto s scalextrickom perom na pohybovej dráhe od Ksesa (@Kseso) na CodePen.

Prezrite si lietadlo Pen CSS Motion Path Airplane od Ali Kleina (@AliKlein) na stránkach CodePen.

Prezrite si Pen CSS Animate na ceste SVG od 一丝 (@yisi) na CodePen.

Prezrite si Pen Motion Path Infinity od Dana Wilsona (@danwilson) na stránkach CodePen.

Pozrite si špirálu Pen CSS Motion Path Spiral od Dana Wilsona (@danwilson) na stránkach CodePen.

Pozrite si pero zGzJYd od 一丝 (@yisi) na CodePen.

Podpora prehliadača

Táto offset-pathvlastnosť sa v čase písania tohto článku stále považuje za experimentálnu funkciu. Ak vás súčasná nedostatočná podpora prehľadávačov váha s použitím v projekte, možno budete chcieť zvážiť použitie GSAP pre túto úroveň animácie, ktorej sa Sarah venuje aj vo svojom príspevku. Takto získate najširšiu podporu prehľadávača v súčasnosti.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome	Firefox	IE	Hrana	Safari
46	72	Nie	79	Nie

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nie

Od prehliadačov Chrome 46 a Opera 33 (a súvisiacich mobilných verzií) máme v aplikácii Blink „počiatočnú podporu“ (bez príznaku).

Existuje iný spôsob, ako to urobiť?

Naša vlastná Sarah Drasner písala o SMIL, natívnej metóde animácie SVG, a o tom, ako animateMotionsa používa na animáciu objektov pozdĺž cesty SVG. Vyzerá to ako:

Podpora SMIL je však zastaraná! Toto sa teda neodporúča.

GreenSock je však iný spôsob, ktorý sa odporúča. Sarah o tom hovorí v GSAP + SVG pre pokročilých používateľov: pohyb po ceste (SVG sa nevyžaduje). Príklad:

Prezrite si ukážku pera pre automatickú rotáciu true / false od Sarah Drasner (@sdras) na CodePen.