Offset-sti - CSS-triks | CSS-almanakk 2025

Denne eiendommen begynte livet som motion-path. Dette og alle andre relaterte bevegelses- * egenskaper omdøpes forskjøvet- * i spesifikasjonen. Vi endrer navnene her i almanakken. Hvis du vil bruke den akkurat nå, er det sannsynligvis best å bruke begge syntaksen.

Den offset-pathegenskap i CSS avgrenser en bevegelsesbane for et element å følge i løpet animasjon. Her er et eksempel på SVG-bane-syntaksen:

.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 egenskapen kan ikke animeres, men definerer banen for animasjon. Vi bruker motion-offseteiendommen til å lage animasjonen. Her er et enkelt eksempel på animering av bevegelsesforskyvning med en @keyframes-animasjon:

.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 enkle eksempel på animering langs en bane av CSS-Tricks (@ css-tricks) på CodePen.

I denne demoen animeres den oransje sirkelen langs det offset-pathvi setter i CSS. Vi tegnet faktisk den veien i SVG med nøyaktig samme path()data, men det er ikke nødvendig for å få bevegelsen.

Si at vi tegnet en funky vei som dette i noen SVG-redigeringsprogramvare:

Vi vil finne en sti som:

Den dattributtverdien er det vi er ute etter, og vi kan flytte den rett til CSS og bruke den som offset-path:

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

Legg merke til de enhetsløse verdiene i banesyntaks. Hvis du bruker CSS på et element i SVG, vil disse koordinatverdiene bruke koordinatsystemet som er satt opp innenfor SVG-ene viewBox. Hvis du bruker bevegelsen til et annet HTML-element, vil disse verdiene være piksler.

Vær også oppmerksom på at vi brukte en grafikk av en finger som peker for å vise hvordan elementet roteres automatisk slik at det ganske vender fremover. 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 */ )

Verdier

Så godt vi kan fortelle, path()og noneer de eneste arbeidsverdiene for offset-path.

Den offset-pathEiendommen er ment å godta alle disse verdiene.

path(): Spesifiserer en bane i SVG-koordinatsyntaks
url: Henviser IDen til et SVG-element som skal brukes som bevegelsessti
basic-shape: Spesifiserer en form i samsvar med CSS Shapes-spesifikasjonen, som inkluderer:
- circle()
- ellipse()
- inset()
- polygon()
Clippy er forresten et fantastisk verktøy for å generere Basic Shape-verdier.
none: Spesifiserer ingen bevegelsesbane i det hele tatt

Her er noen tester:

Se pennenes bevegelsesverditest av CSS-Tricks (@ css-tricks) på CodePen.

Selv å fortelle et SVG-element å referere til en sti som definerte den samme SVG via, url()ser ikke ut til å fungere.

Med Web Animations API

Dan Wilson utforsket noe av dette i Future Use: CSS Motion Paths. Du har tilgang til alle disse samme tingene i JavaScript via Web Animations API. Si for eksempel at du har definert en offset-pathi CSS, men du kan fremdeles kontrollere animasjonen via JavaScript:

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

Flere eksempler

Heads up! Mange av disse ble opprettet før skiftet fra bevegelse- * navngivning til forskyvning- *. Bør være ganske enkelt å fikse dem hvis du er så tilbøyelig.

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

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

Se Pen Scalextric bil på bevegelsesbane 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 pennen zGzJYd av 一丝 (@yisi) på CodePen.

Nettleserstøtte

Den offset-pathegenskapen er fortsatt betraktet som en eksperimentell funksjon på tidspunktet for dette skriftlig. Hvis den nåværende mangelen på nettleserstøtte gjør deg nølende med å bruke den på et prosjekt, vil du kanskje vurdere å bruke GSAP til dette animasjonsnivået, som Sarah også dekker i sitt innlegg. Dette gir deg den bredeste nettleserstøtten for øyeblikket.

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome	Firefox	DVS	Kant	Safari
46	72	Nei	79	Nei

Mobil / nettbrett

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nei

Fra og med Chrome 46 og Opera 33 (og relaterte mobilversjoner) har vi "første støtte" i Blink (uten flagg).

Er det en annen måte å gjøre dette på?

Vår egen Sarah Drasner skrev om SMIL, SVGs opprinnelige metode for animasjoner, og hvordan animateMotionbrukes til å animere objekter langs en SVG-bane. Det ser ut som:

Men SMIL blir utfaset! Så dette anbefales ikke.

GreenSock er en annen måte, men det anbefales. Sarah snakker om dette i GSAP + SVG for kraftbrukere: Bevegelse langs en bane (SVG ikke påkrevd). Eksempel:

Se pennedemoen for autoRotate true / false av Sarah Drasner (@sdras) på CodePen.