Offset-path - CSS-tricks | CSS Almanack 2025

Denna egendom började livet som motion-path. Detta, och alla andra relaterade rörelse- * egenskaper, döps om i offset- * i specifikationen. Vi ändrar namnen här i almanaken. Om du vill använda den just nu är det troligen bäst att använda båda syntaxerna.

Den offset-pathegendom i CSS definierar en rörelsebana för ett element att följa under animation. Här är ett exempel med SVG-sökvägssyntax:

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

Den här egenskapen kan inte animeras, utan definierar vägen för animering. Vi använder motion-offsetfastigheten för att skapa animationen. Här är ett enkelt exempel på animering av rörelseoffset med en @keyframes-animation:

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

Se pennens enkla exempel på animering längs en bana av CSS-Tricks (@ css-tricks) på CodePen.

I den här demonstrationen animeras den orange cirkeln längs den som offset-pathvi ställer in i CSS. Vi ritade faktiskt den vägen i SVG med exakt samma path()data, men det är inte nödvändigt för att få rörelsen.

Säg att vi ritade en så här sti i någon SVG-redigeringsprogramvara:

Vi skulle hitta en väg som:

Det dattributvärdet är vad vi är ute efter, och vi kan flytta den direkt till CSS och använda den som offset-path:

Se Pen zEpLRo av CSS-Tricks (@ css-tricks) på CodePen.

Observera de enhetslösa värdena i banans syntax. Om du tillämpar CSS på ett element i SVG, använder dessa koordinatvärden det koordinatsystem som ställts in inom de SVG: erna viewBox. Om du använder rörelsen på något annat HTML-element kommer dessa värden att vara pixlar.

Observera också att vi använde en grafisk bild av ett finger som pekade för att visa hur elementet roteras automatiskt så att det ganska vänder framåt. Du kan kontrollera det med 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 */ )

Värden

Så gott vi kan säga path()och noneär de enda arbetsvärdena för offset-path.

Den offset-pathegenskapen är tänkt att ta emot alla följande värden.

path(): Anger en sökväg i SVG-koordinatsyntaxen
url: Referenser ID för ett SVG-element som ska användas som en rörelsebana
basic-shape: Anger en form i enlighet med CSS Shapes-specifikationen, som inkluderar:
- circle()
- ellipse()
- inset()
- polygon()
Clippy är förresten ett fantastiskt verktyg för att generera grundläggande formvärden.
none: Anger ingen rörelsebana alls

Här är några tester:

Se Penns rörelse-vägvärden test av CSS-Tricks (@ css-tricks) på CodePen.

Även om man säger till ett SVG-element att referera till en väg definierade samma SVG via url()verkar det inte fungera.

Med API för webbanimeringar

Dan Wilson utforskade något av detta i framtida användning: CSS Motion Paths. Du har tillgång till alla samma saker i JavaScript via Web Animations API. Till exempel, säg att du har definierat en offset-pathi CSS, du kan fortfarande styra animeringen via JavaScript:

Se pennan CSS MotionPath av CSS-Tricks (@ css-tricks) på CodePen.

Fler exempel

Se upp! Många av dessa skapades före bytet från rörelse- * namngivning till förskjutning- *. Bör vara ganska lätt att fixa dem om du är så benägen.

Se pennan Whoosh! av Merih Akar (@merih) på CodePen.

Se pennan pJarJO av Eric Willigers (@ericwilligers) på CodePen.

Se Pen Scalextric bil på motion-path av Kseso (@Kseso) på CodePen.

Se Pen CSS Motion Path Airplane av Ali Klein (@AliKlein) på CodePen.

Se Pen CSS Animate på SVG Path av 一丝 (@yisi) på CodePen.

Se Pen Motion Path Infinity av Dan Wilson (@danwilson) på CodePen.

Se Pen CSS Motion Path Spiral av Dan Wilson (@danwilson) på CodePen.

Se pennan zGzJYd av 一丝 (@yisi) på CodePen.

Webbläsarstöd

Den offset-pathegenskapen är fortfarande betraktas som en experimentell funktion vid tidpunkten för denna skrift. Om den nuvarande bristen på webbläsarstöd gör dig tveksam till att använda det i ett projekt, kanske du vill överväga att använda GSAP för denna animationsnivå, som Sarah också täcker i sitt inlägg. Detta ger dig det bredaste webbläsarstödet just nu.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom	Firefox	IE	Kant	Safari
46	72	Nej	79	Nej

Mobil / surfplatta

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nej

Från och med Chrome 46 och Opera 33 (och relaterade mobilversioner) har vi "initialt stöd" i Blink (ingen flagga).

Finns det ett annat sätt att göra detta?

Vår egen Sarah Drasner skrev om SMIL, SVG: s ursprungliga metod för animationer, och hur man animateMotionanvänder för att animera objekt längs en SVG-väg. Det ser ut som:

Men SMIL avskaffas! Så detta rekommenderas inte.

GreenSock är dock ett annat sätt som rekommenderas. Sarah talar om detta i GSAP + SVG för kraftanvändare: Rörelse längs en väg (SVG krävs inte). Exempel:

Se Pen Demo för autoRotate true / false av Sarah Drasner (@sdras) på CodePen.