Förskjutningsavstånd - CSS-tricks

Denna egendom började livet som motion-offset. 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 motion-offsetegendom i CSS säger: hur långt längs motion-pathär du? Detta är den animerbara egenskapen som är associerad med rörelsevägar.

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

I exemplet ovan har vi ställt in det initiala motion-offsetvärdet på 0%, även om det är värt att notera att noll är standardvärdet, även om det inte uttryckligen definierats (vi kunde ha utelämnat det).

Variabler

Den offset-distancefastighet accepterar följande värden:

length
percentage

I båda fallen anger värdet längden på avståndet från startpunkten för sökvägen (standard är 0pxeller 0%) till slutpunkten för sökvägen.

Exempel

I det här exemplet har vi två cirklar där en liten cirkel färdas längs en större cirkels väg.

Här är SVG-filen som vi använder för att rita formerna:

Nu kan vi ställa in .markerklassen i vår CSS för att följa .trackklasskoordinaterna:

/* 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%; ) )

Se pennens enkla exempel på animering längs en väg av Geoff Graham (@geoffgraham) på CodePen.

På samma sätt kan vi stoppa offset-distancevärdet på 50% och animeringen skulle släppa halvvägs runt banan:

Se pennens enkla exempel på animering längs en väg av Geoff Graham (@geoffgraham) på CodePen.

Eller för att kontrollera animationens hastighet kan vi multiplicera offset-distancevärdet till 300% för att påskynda saker. Men om vi har specificerat hur lång tid animationen körs till ett värde som är större än vad det tar för elementet att resa vägen, kommer rörelsen att stoppas tills animationen har slutfört sitt intervall innan den upprepas:

Se pennens enkla exempel på animering längs en väg av Geoff Graham (@geoffgraham) på CodePen.

Webbläsarstöd

den offset-distanceegenskapen är fortfarande betraktas som en experimentell funktion vid tidpunkten för denna skrift och det finns ingen dokumentation om webbläsare stöd. Det finns dock dokumentation om motion-pathsupport och vi kan använda det som en baslinje för tillfället.

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.