Offset-path - Triky CSS | Almanach CSS 2025

Tato vlastnost začala život jako motion-path. Toto a všechny další související vlastnosti motion- * jsou ve specifikaci přejmenovány offset- *. Měníme jména zde v almanachu. Pokud ji chcete použít právě teď, pravděpodobně nejlépe použijte obě syntaxe.

offset-pathVlastnost CSS definuje pohybová cesta pro prvek následovat během animace. Zde je příklad použití 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"); )

Tuto vlastnost nelze animovat, spíše definuje cestu pro animaci. motion-offsetVlastnost používáme k vytvoření animace. Tady je jednoduchý příklad animace offsetu pohybu pomocí animace @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 */ ) )

Podívejte se na jednoduchý příklad pera animace po cestě pomocí CSS-Tricks (@ css-tricks) na CodePen.

V této ukázce se oranžový kruh animuje podél toho, offset-pathco jsme nastavili v CSS. Ve skutečnosti jsme nakreslili tuto cestu v SVG se stejnými path()daty, ale to není nutné, abychom dostali pohyb.

Řekněme, že jsme v nějakém softwaru pro úpravy SVG nakreslili takovou funky cestu:

Našli bychom cestu jako:

dHodnota atributu je to, co jsme po něm, a my jej přesunout rovnou do CSS a použít ji jako offset-path:

Podívejte se na Pen zEpLRo od CSS-Tricks (@ css-tricks) na CodePen.

Poznamenejte si hodnoty bez jednotek v syntaxi cesty. Pokud aplikujete CSS na prvek v SVG, použijí tyto hodnoty souřadnic souřadnicový systém nastavený v tomto SVG viewBox. Pokud pohyb aplikujete na nějaký jiný prvek HTML, budou tyto hodnoty pixely.

Všimněte si také, že jsme použili grafiku ukazující prstem, abychom ukázali, jak se prvek automaticky otáčí tak, aby směřoval dopředu. Můžete to ovládat pomocí 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

Jak nejlépe, jak můžeme říci, path()a nonejsou pouze pracovní hodnoty offset-path.

offset-pathVlastnost má přijmout všechny tyto hodnoty.

path(): Určuje cestu v syntaxi souřadnic SVG
url: Odkazuje na ID prvku SVG, který má být použit jako cesta pohybu
basic-shape: Určuje tvar v souladu se specifikací CSS Shapes, která zahrnuje:
- circle()
- ellipse()
- inset()
- polygon()
Clippy je mimochodem úžasný nástroj pro generování hodnot Basic Shape.
none: Určuje vůbec žádnou cestu pohybu

Zde je několik testů:

Podívejte se na test hodnot pohybu dráhy Pen pomocí CSS-Tricks (@ css-tricks) na CodePen.

url()Zdá se, že ani to, že řeknete prvku SVG, aby odkazoval na cestu definovanou stejným SVG pomocí, nefunguje.

S API pro webové animace

Dan Wilson prozkoumal něco z toho v části Future Use: CSS Motion Paths. Ke všem těmto stejným věcem v JavaScriptu máte přístup prostřednictvím rozhraní API webových animací. Řekněme například, že jste definovali a offset-pathv CSS, stále můžete ovládat animaci pomocí JavaScriptu:

Podívejte se na Pen CSS MotionPath od CSS-Tricks (@ css-tricks) na CodePen.

Další příklady

Hlavy vzhůru! Mnoho z nich bylo vytvořeno před změnou z motion- * pojmenování na offset- *. Mělo by být docela snadné je opravit, pokud jste tak nakloněni.

Podívejte se na pero Whoosh! podle Merih Akar (@merih) na CodePen.

Podívejte se na pero pJarJO od Erica Willigerse (@ericwilligers) na CodePen.

Podívejte se na auto Scalextric Pen na pohybové cestě od Ksesa (@Kseso) na CodePen.

Podívejte se na pero CSS Motion Path Airplane od Ali Kleina (@AliKlein) na CodePen.

Podívejte se na Pen CSS Animate na SVG Path od 一丝 (@yisi) na CodePen.

Podívejte se na Pen Motion Path Infinity od Dana Wilsona (@danwilson) na CodePen.

Podívejte se na spirálu Pen CSS Motion Path Spiral od Dana Wilsona (@danwilson) na CodePen.

Podívejte se na Pen zGzJYd od 一丝 (@yisi) na CodePen.

Podpora prohlížeče

offset-pathNemovitost je stále považována za experimentální funkce v době psaní tohoto článku. Pokud vás současná nedostatečná podpora prohlížečů váhá s jejím použitím v projektu, možná budete chtít zvážit použití GSAP pro tuto úroveň animace, kterou Sarah také popisuje ve svém příspěvku. To vám v tuto chvíli nabídne nejširší podporu prohlížeče.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome	Firefox	TJ	Okraj	Safari
46	72	Ne	79	Ne

Mobilní / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ne

Od Chrome 46 a Opera 33 (a souvisejících mobilních verzí) máme v Blink „počáteční podporu“ (bez příznaku).

Existuje jiný způsob, jak to udělat?

Naše vlastní Sarah Drasner psala o SMIL, nativní metodě SVG pro animace a o tom, jak animateMotionse používá k animaci objektů podél cesty SVG. Vypadá to, že:

Ale SMIL je zastaralý! To se tedy nedoporučuje.

GreenSock je však jiný způsob, který se doporučuje. Sarah o tom mluví v GSAP + SVG pro Power Users: Motion Along A Path (SVG není vyžadováno). Příklad:

Podívejte se na ukázku pera pro autoRotate true / false Sarah Drasner (@sdras) na CodePen.