Odmična razdalja - CSS-triki

Ta lastnost je začela življenje kot motion-offset. Ta in vse druge povezane lastnosti gibanja * se v specifikaciji preimenujejo v offset- *. Tukaj v almanahu spreminjamo imena. Če jo želite uporabiti zdaj, je verjetno najbolje, da uporabite obe sintaksi.

motion-offsetHotel v CSS pravi: kako daleč vzdolž motion-pathste? To je animacijska lastnost, povezana s potmi gibanja.

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

V zgornjem primeru smo začetno motion-offsetvrednost nastavili na 0%, čeprav velja omeniti, da je nič privzeta vrednost, tudi če ni izrecno določena (to bi lahko izpustili).

Spremenljivke

offset-distanceLastnina sprejema naslednje vrednosti:

length
percentage

V obeh primerih vrednost določa dolžino razdalje od začetne točke poti (privzeto je 0pxali 0%) do končne točke poti.

Primer

V tem primeru imamo dva kroga, kjer en majhen krog potuje po poti večjega kroga.

Tu je datoteka SVG, ki jo uporabljamo za risanje oblik:

Zdaj lahko .markerv našem CSS nastavimo razred, da sledi .trackkoordinatam razreda:

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

Oglejte si primer preprostega peresa animiranja po poti, ki ga je napisal Geoff Graham (@geoffgraham) na CodePen.

Podobno lahko ustavimo offset-distancevrednost pri 50% in animacija bi padla na pol poti:

Oglejte si primer preprostega peresa animiranja po poti, ki ga je napisal Geoff Graham (@geoffgraham) na CodePen.

Ali pa za nadzor hitrosti animacije lahko offset-distancevrednost pomnožimo na 300%, da pospešimo stvari. Če pa smo določili, koliko časa se animacija izvaja pri vrednosti, ki je večja od tistega, ki je potreben elementu za pot, se bo gibanje ustavilo, dokler animacija ne zaključi intervala pred ponovitvijo:

Oglejte si primer preprostega peresa animiranja po poti, ki ga je napisal Geoff Graham (@geoffgraham) na CodePen.

Podpora brskalnika

offset-distancelastnina še vedno velja poskusna funkcija v času tega pisanja in ni dokumentacije o podpori brskalnika. Vendar obstaja dokumentacija o motion-pathpodpori, ki jo lahko trenutno uporabimo kot izhodišče.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.