Offset-distance - CSS-tricks

Anonim
Denne ejendom begyndte livet som motion-offset. Dette og alle andre relaterede bevægelses- * egenskaber omdøbes forskudt- * i specifikationen. Vi ændrer navnene her i almanakken. Hvis du vil bruge det lige nu, er det sandsynligvis bedst at bruge begge syntakser.

Den motion-offsetejendom i CSS siger: hvor langt den motion-pather du? Dette er den animationsegenskab, der er knyttet til bevægelsesstier.

.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 indstillet motion-offsetstartværdien til 0%, selvom det er værd at bemærke, at nul er standardværdien, selv når den ikke er eksplicit defineret (vi kunne have udeladt den).

Variabler

Den offset-distanceejendom accepterer følgende værdier:

  • length
  • percentage

I begge tilfælde angiver værdien længden på afstanden fra startpunktet for stien (standard er 0pxeller 0%) til slutpunktet for stien.

Eksempel

I dette eksempel har vi to cirkler, hvor en lille cirkel bevæger sig langs stien til en større cirkel.

Her er SVG-filen, vi bruger til at tegne figurerne:

Nu kan vi indstille .markerklassen i vores CSS til at følge .trackklassekoordinaterne:

/* 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 af Geoff Graham (@geoffgraham) på CodePen.

På samme måde kan vi stoppe offset-distanceværdien på 50%, og animationen vil falde halvvejs rundt stien:

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

Eller for at kontrollere animationens hastighed kunne vi gange offset-distanceværdien til 300% for at fremskynde tingene. Men hvis vi har specificeret, hvor lang tid animationen kører til en værdi, der er større end det, det tager elementet at rejse stien, stopper bevægelsen, indtil animationen har afsluttet sit interval, inden den gentages:

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

Browsersupport

den offset-distanceejendom er stadig betragtes som en eksperimentel funktion på tidspunktet for dette skrives, og der er ingen dokumentation for browser support. Der er dog dokumentation for motion-pathsupport, og vi kan bruge det som en basislinie for tiden.

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
46 72 Ingen 79 Ingen

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Ingen

Yderligere Information

  • Motion Path Module Level 1 Spec
  • Eksempler på CodePen
  • WebKit-billet # 139128
  • Mozilla-billet # 1186329
  • Microsoft Edge-funktionsanmodning