Offset-afstand - CSS-trucs | CSS Almanac 2025

Dit pand begon zijn leven als motion-offset. 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 motion-offseteigenschap in CSS zegt: hoe ver motion-pathben je? Dit is de animeerbare eigenschap die is gekoppeld aan bewegingspaden.

.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'); motion-offset: 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'); offset-distance: 0%; animation: move 3s linear infinite; ) /* Animate the element along the path from 0% to 100% */ @keyframes move ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

In het bovenstaande voorbeeld hebben we de beginwaarde ingesteld motion-offsetop 0%, hoewel het vermeldenswaard is dat nul de standaardwaarde is, zelfs als deze niet expliciet is gedefinieerd (we hadden dat kunnen weglaten).

Variabelen

De offset-distanceeigenschap accepteert de volgende waarden:

length
percentage

In beide gevallen specificeert de waarde de afstand vanaf het startpunt van het pad (standaard is 0pxof 0%) tot het eindpunt van het pad.

Voorbeeld

In dit voorbeeld hebben we twee cirkels waarbij een kleine cirkel langs het pad van een grotere cirkel beweegt.

Hier is het SVG-bestand dat we gebruiken om de vormen te tekenen:

Nu kunnen we de .markerklasse in onze CSS zo instellen dat deze de klassecoördinaten volgt .track:

/* The motion-offset is zero by default */ .marker ( 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 ( /* Move the .marker from it's default value of 0% to 100% of the path's length */ 100% ( offset-distance: 100%; ) )

Zie het eenvoudige voorbeeld van een animatie langs een pad door Geoff Graham (@geoffgraham) op CodePen.

Evenzo kunnen we de offset-distancewaarde stoppen op 50% en de animatie zou halverwege het pad afnemen:

Zie het eenvoudige voorbeeld van een animatie langs een pad door Geoff Graham (@geoffgraham) op CodePen.

Of, om de snelheid van de animatie te regelen, kunnen we de offset-distancewaarde vermenigvuldigen tot 300% om de zaken te versnellen. Als we echter hebben gespecificeerd hoe lang de animatie wordt uitgevoerd met een waarde die groter is dan wat het element nodig heeft om het pad af te leggen, stopt de beweging totdat de animatie zijn interval heeft voltooid voordat deze wordt herhaald:

Zie het eenvoudige voorbeeld van een animatie langs een pad door Geoff Graham (@geoffgraham) op CodePen.

Browser-ondersteuning

de offset-distanceeigenschap wordt op het moment van schrijven nog steeds als een experimentele functie beschouwd en er is geen documentatie over browserondersteuning. Er is echter documentatie over motion-pathondersteuning en die kunnen we voorlopig als uitgangspunt gebruiken.

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