motion-offset. Šis un visi citi saistītie kustības * rekvizīti tiek pārdēvēti par nobīdi *. Mēs mainām nosaukumus šeit almanahā. Ja vēlaties to izmantot tūlīt, iespējams, vislabāk izmantot abas sintakses.
motion-offsetĪpašums CSS saka: cik tālu gar motion-pathtu esi? Šis ir animējamais īpašums, kas saistīts ar kustības ceļiem.
.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 */ ) )Iepriekš minētajā piemērā mēs esam iestatījuši sākotnējo motion-offsetvērtību uz 0%, lai gan ir vērts atzīmēt, ka nulle ir noklusējuma vērtība, pat ja tā nav skaidri definēta (mēs to varētu arī atstāt).
Mainīgie
offset-distanceĪpašums pieņem šādas vērtības:
lengthpercentage
Abos gadījumos vērtība norāda attāluma garumu no ceļa sākuma punkta (noklusējums ir 0pxvai 0%) līdz ceļa beigu punktam.
Piemērs
Šajā piemērā mums ir divi apļi, kur viens mazs aplis pārvietojas pa lielāka apļa ceļu.
Šeit ir SVG fails, kuru izmantojam, lai zīmētu formas:
Tagad mēs varam iestatīt .markerklasi mūsu CSS sekot .trackklases koordinātām:
/* 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%; ) )Skatiet Geoff Graham (@geoffgraham) vietnē CodePen izmantoto vienkāršo pildspalvveida pilnveidošanas piemēru.
Līdzīgi mēs varam apturēt offset-distancevērtību ar 50%, un animācija samazināsies pusceļā:
Skatiet Geoff Graham (@geoffgraham) vietnē CodePen izmantoto vienkāršo pildspalvveida pilnveidošanas piemēru.
Vai arī, lai kontrolētu animācijas ātrumu, mēs varētu reizināt offset-distancevērtību līdz 300%, lai paātrinātu situāciju. Tomēr, ja mēs esam norādījuši laiku, kad animācija darbojas ar vērtību, kas lielāka par elementam nepieciešamo, lai pārvietotos pa ceļu, kustība tiks pārtraukta, līdz animācija būs atkārtojusi savu intervālu:
Skatiet Geoff Graham (@geoffgraham) vietnē CodePen izmantoto vienkāršo pildspalvveida pilnveidošanas piemēru.
Pārlūkprogrammas atbalsts
offset-distanceīpašums joprojām tiek uzskatīta par eksperimentāla funkcija laikā šī rakstiski, un nav nekādu dokumentu par pārlūka atbalstu. Tomēr ir dokumentācija par motion-pathatbalstu, un mēs to pagaidām varam izmantot kā pamatu.
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 46 | 72 | Nē | 79 | Nē |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | Nē |
Papildus informācija
- Kustības ceļa modulis 1. līmenis Spec
- Piemēri par CodePen
- WebKit biļete # 139128
- Mozilla biļete # 1186329
- Microsoft Edge funkcijas pieprasījums