Offset-sti - CSS-tricks | CSS Almanak 2025

Denne ejendom begyndte livet som motion-path. Dette og alle andre relaterede bevægelses- * egenskaber omdøbes forskudt- * i specifikationen. Vi ændrer navnene her i almanakken. Hvis du vil bruge det lige nu, er det sandsynligvis bedst at bruge begge syntakser.

Den offset-pathejendom i CSS definerer en bevægelsesbane for et element for at følge løbet animation. Her er et eksempel på SVG-stiensyntaks:

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

Denne egenskab kan ikke animeres, men snarere definerer den stien til animation. Vi bruger motion-offsetejendommen til at oprette animationen. Her er et simpelt eksempel på animering af bevægelsesforskydning 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 simple eksempel på animation langs en sti af CSS-Tricks (@ css-tricks) på CodePen.

I denne demo animeres den orange cirkel langs det offset-pathvi indstiller i CSS. Vi trak faktisk den vej i SVG med nøjagtigt de samme path()data, men det er ikke nødvendigt for at få bevægelsen.

Sig, at vi tegnede en funky sti som denne i nogle SVG-redigeringssoftware:

Vi ville finde en sti som:

Den dværdi attribut er, hvad vi er ude efter, og vi kan flytte det lige til CSS og bruge det som offset-path:

Se pennen zEpLRo af CSS-Tricks (@ css-tricks) på CodePen.

Bemærk de enhedsløse værdier i stiensyntaks. Hvis du anvender CSS til et element i SVG, bruger disse koordinatværdier det koordinatsystem, der er oprettet inden for de SVG'er viewBox. Hvis du anvender bevægelsen på et andet HTML-element, er disse værdier pixels.

Bemærk også, at vi brugte en grafik af en finger, der peger for at vise, hvordan elementet automatisk roteres, så det lidt vender fremad. Du kan kontrollere 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ærdier

Så godt vi kan fortælle, path()og noneer de eneste arbejdsværdier for offset-path.

Den offset-pathegenskab er meningen at acceptere alle følgende værdier.

path(): Angiver en sti i SVG-koordinatsyntaks
url: Henviser til ID'et på et SVG-element, der skal bruges som en bevægelsessti
basic-shape: Angiver en form i overensstemmelse med CSS Shapes-specifikationen, som inkluderer:
- circle()
- ellipse()
- inset()
- polygon()
Clippy er forresten et fantastisk værktøj til at generere Basic Shape-værdier.
none: Angiver slet ingen bevægelsessti

Her er nogle tests:

Se test af værdier for pen-bevægelsesværdier af CSS-Tricks (@ css-tricks) på CodePen.

Selv at fortælle et SVG-element at henvise til en sti, der definerede den samme SVG via, url()ser ikke ud til at fungere.

Med Web Animations API

Dan Wilson udforskede noget af dette i Future Use: CSS Motion Paths. Du har adgang til alle de samme ting i JavaScript via Web Animations API. Lad os f.eks. Sige, at du har defineret en offset-pathi CSS, og du kan stadig kontrollere animationen via JavaScript:

Se Pen CSS MotionPath af CSS-Tricks (@ css-tricks) på CodePen.

Flere eksempler

Heads up! Mange af disse blev oprettet før skiftet fra bevægelse- * navngivning til forskydning- *. Bør være ret let at rette dem, hvis du er så tilbøjelig.

Se Pen Whoosh! af Merih Akar (@merih) på CodePen.

Se pennen pJarJO af Eric Willigers (@ericwilligers) på CodePen.

Se Pen scalextric bil på motion-path af Kseso (@Kseso) på CodePen.

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

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

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

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

Se pennen zGzJYd af 一丝 (@yisi) på CodePen.

Browsersupport

Den offset-pathejendom er stadig betragtes som en eksperimentel funktion på tidspunktet for dette skrives. Hvis den nuværende mangel på browserstøtte får dig til at tøve med at bruge den til et projekt, kan du overveje at bruge GSAP til dette niveau af animation, som Sarah også dækker i sit indlæg. Dette giver dig den bredeste browsersupport i øjeblikket.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome	Firefox	IE	Edge	Safari
46	72	Ingen	79	Ingen

Mobil / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ingen

Fra Chrome 46 og Opera 33 (og de relaterede mobilversioner) har vi "indledende support" i Blink (intet flag).

Er der en anden måde at gøre dette på?

Vores egen Sarah Drasner skrev om SMIL, SVGs oprindelige metode til animationer, og hvordan animateMotionbruges til at animere objekter langs en SVG-sti. Det ser ud som om:

Men SMIL forældes! Så dette anbefales ikke.

GreenSock er dog en anden måde, der anbefales. Sarah taler om dette i GSAP + SVG for strømbrugere: Bevægelse langs en sti (SVG kræves ikke). Eksempel:

Se Pen Demo for autoRotate true / false af Sarah Drasner (@sdras) på CodePen.