Offset-pad - CSS-trucs | CSS Almanac 2025

Dit pand begon zijn leven als motion-path. Deze, en alle andere gerelateerde beweging- * eigenschappen, worden in de specificatie hernoemd naar offset- *. We veranderen de namen hier in de almanak. Als je het nu wilt gebruiken, is het waarschijnlijk het beste om beide syntaxis te gebruiken.

De offset-patheigenschap in CSS definieert een bewegingspad dat een element tijdens animatie moet volgen. Hier is een voorbeeld waarbij de syntaxis van het SVG-pad wordt gebruikt:

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

Deze eigenschap kan niet worden geanimeerd, maar definieert het pad voor animatie. We gebruiken de motion-offseteigenschap om de animatie te maken. Hier is een eenvoudig voorbeeld van het animeren van motion-offset met een @ keyframes-animatie:

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

Zie het eenvoudige voorbeeld van een pen om langs een pad te animeren met CSS-Tricks (@ css-tricks) op CodePen.

In deze demo wordt de oranje cirkel geanimeerd langs de offset-pathin CSS. We hebben dat pad in SVG getekend met exact dezelfde path()gegevens, maar dat is niet nodig om de beweging te krijgen.

Stel dat we een funky pad als dit hebben getekend in sommige SVG-bewerkingssoftware:

We zouden een pad vinden als:

De dattribuutwaarde is wat we zoeken, en we kunnen het rechtstreeks naar CSS verplaatsen en gebruiken als offset-path:

Zie de Pen zEpLRo door CSS-Tricks (@ css-tricks) op CodePen.

Let op de eenheidloze waarden in de padsyntaxis. Als u de CSS toepast op een element binnen SVG, gebruiken die coördinaatwaarden het coördinatensysteem dat is ingesteld binnen die SVG's viewBox. Als u de beweging toepast op een ander HTML-element, zijn die waarden pixels.

Merk ook op dat we een afbeelding van een vinger hebben gebruikt om te laten zien hoe het element automatisch wordt geroteerd, zodat het een beetje naar voren wijst. U kunt dat regelen met 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 */ )

Waarden

Voor zover we kunnen zien, path()en nonezijn de enige werkwaarden voor offset-path.

De offset-patheigenschap moet alle volgende waarden accepteren.

path(): Geeft een pad op in de syntaxis van de SVG-coördinaten
url: Verwijst naar de ID van een SVG-element dat als bewegingspad moet worden gebruikt
basic-shape: Specificeert een vorm in overeenstemming met de CSS Shapes-specificatie, waaronder:
- circle()
- ellipse()
- inset()
- polygon()
Clippy is trouwens een geweldig hulpmiddel om basisvormwaarden te genereren.
none: Specificeert helemaal geen bewegingspad

Hier zijn enkele tests:

Zie de Pen motion-path-waarden-test door CSS-Tricks (@ css-tricks) op CodePen.

Zelfs een SVG-element vertellen om te verwijzen naar een pad dat via dezelfde SVG is gedefinieerd, url()lijkt niet te werken.

Met de Web Animations API

Dan Wilson heeft een aantal hiervan onderzocht in Future Use: CSS Motion Paths. Je hebt toegang tot al deze dingen in JavaScript via de Web Animations API. Stel dat u een offset-pathin CSS heeft gedefinieerd , dan kunt u de animatie nog steeds besturen via JavaScript:

Zie de Pen CSS MotionPath door CSS-Tricks (@ css-tricks) op CodePen.

Meer voorbeelden

Let op! Veel hiervan zijn gemaakt vóór de overgang van motion- * naamgeving naar offset- *. Het zou vrij eenvoudig moeten zijn om ze te repareren als u zo geneigd bent.

Zie de Pen Whoosh! door Merih Akar (@merih) op CodePen.

Zie de Pen pJarJO door Eric Willigers (@ericwilligers) op CodePen.

Zie de Pen scalextric-auto op bewegingspad door Kseso (@Kseso) op CodePen.

Zie de Pen CSS Motion Path Airplane door Ali Klein (@AliKlein) op CodePen.

Zie de Pen CSS Animate op SVG Path door 一丝 (@yisi) op CodePen.

Zie de Pen Motion Path Infinity van Dan Wilson (@danwilson) op CodePen.

Zie de Pen CSS Motion Path Spiral door Dan Wilson (@danwilson) op CodePen.

Zie de Pen zGzJYd door 一丝 (@yisi) op CodePen.

Browser-ondersteuning

De offset-patheigenschap wordt op het moment van schrijven nog steeds als een experimentele functie beschouwd. Als het huidige gebrek aan browserondersteuning je aarzelt om het in een project te gebruiken, dan kun je overwegen om GSAP te gebruiken voor dit animatieniveau, dat Sarah ook in haar bericht behandelt. Dit biedt u momenteel de breedste browserondersteuning.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome	Firefox	D.W.Z	Rand	Safari
46	72	Nee	79	Nee

Mobiel / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Nee

Vanaf Chrome 46 en Opera 33 (en de gerelateerde mobiele versies) hebben we "initiële ondersteuning" in Blink (geen vlag).

Is er een andere manier om dit te doen?

Onze eigen Sarah Drasner schreef over SMIL, SVG's eigen methode voor animaties, en hoe animateMotionwordt gebruikt om objecten langs een SVG-pad te animeren. Het lijkt op:

Maar SMIL wordt afgeschaft! Dus dit wordt niet aanbevolen.

GreenSock is echter een andere manier, die wordt aanbevolen. Sarah vertelt hierover in GSAP + SVG voor hoofdgebruikers: beweging langs een pad (SVG niet vereist). Voorbeeld:

Zie de pendemo voor autoRotate true / false door Sarah Drasner (@sdras) op CodePen.