Offset-distance - CSS-triks

Anonim
Denne eiendommen begynte livet som motion-offset. 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 motion-offseteiendom i CSS sier: hvor langt motion-pather du? Dette er den animerte egenskapen som er knyttet til bevegelsesstier.

.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 eksemplet ovenfor har vi satt startverdien motion-offsettil 0%, selv om det er verdt å merke seg at null er standardverdien, selv når den ikke er eksplisitt definert (vi kunne ha utelatt den).

Variabler

Den offset-distanceeiendommen aksepterer følgende verdier:

  • length
  • percentage

I begge tilfeller angir verdien lengden på avstanden fra startpunktet til banen (standard er 0pxeller 0%) til endepunktet til banen.

Eksempel

I dette eksemplet har vi to sirkler der en liten sirkel beveger seg langs banen til en større sirkel.

Her er SVG-filen vi bruker for å tegne figurene:

Nå kan vi stille .markerklassen i CSS til å følge .trackklassekoordinatene:

/* 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 enkle eksempel på animering langs en sti av Geoff Graham (@geoffgraham) på CodePen.

På samme måte kan vi stoppe offset-distanceverdien på 50%, og animasjonen vil falle halvveis rundt banen:

Se pennens enkle eksempel på animering langs en sti av Geoff Graham (@geoffgraham) på CodePen.

Eller, for å kontrollere hastigheten på animasjonen, kan vi multiplisere offset-distanceverdien til 300% for å øke hastigheten. Men hvis vi har spesifisert hvor lang tid animasjonen kjører til en verdi som er større enn hva det tar elementet å reise banen, vil bevegelsen stoppe til animasjonen har fullført intervallet før den gjentas:

Se pennens enkle eksempel på animering langs en sti av Geoff Graham (@geoffgraham) på CodePen.

Nettleserstøtte

den offset-distanceeiendommen er fortsatt betraktet som en eksperimentell funksjon på tidspunktet for dette skriftlig, og det er ingen dokumentasjon i nettleseren støtte. Imidlertid er det dokumentasjon om motion-pathstøtte, og vi kan bruke det som en grunnlinje foreløpig.

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

Tilleggsinformasjon

  • Bevegelsesmodul Nivå 1 Spes
  • Eksempler på CodePen
  • WebKit-billett # 139128
  • Mozilla-billett # 1186329
  • Microsoft Edge-funksjonsforespørsel