Offsetová vzdialenosť - Triky CSS

Táto vlastnosť začala život ako motion-offset. Toto a všetky ďalšie súvisiace vlastnosti motion- * sa v spec. Premenujú na offset- *. Meníme mená tu v almanachu. Ak ju chcete použiť práve teraz, pravdepodobne bude najlepšie použiť obidve syntaxe.

motion-offsetNehnuteľnosť v CSS hovorí: ako ďaleko pozdĺž motion-pathste? Toto je animovateľná vlastnosť spojená s pohybovými cestami.

.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 príklade vyššie sme nastavili počiatočnú motion-offsethodnotu na 0%, aj keď stojí za zmienku, že nula je predvolená hodnota, aj keď nie je výslovne definovaná (mohli sme ju vynechať).

Premenné

Toto offset-distanceubytovacie zariadenie akceptuje nasledujúce hodnoty:

length
percentage

V obidvoch prípadoch hodnota určuje dĺžku vzdialenosti od počiatočného bodu cesty (predvolená hodnota je 0pxalebo 0%) do koncového bodu cesty.

Príklad

V tomto príklade máme dva kruhy, kde jeden malý kruh cestuje po ceste väčšieho kruhu.

Tu je súbor SVG, ktorý používame na kreslenie tvarov:

Teraz môžeme nastaviť .markertriedu v našom CSS tak, aby sledovala .tracksúradnice triedy:

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

Pozrite si jednoduchý príklad pera animácie pozdĺž cesty od Geoffa Grahama (@geoffgraham) na stránke CodePen.

Podobne môžeme offset-distancehodnotu zastaviť na 50% a animácia by vypadla do polovice cesty:

Pozrite si jednoduchý príklad pera animácie pozdĺž cesty od Geoffa Grahama (@geoffgraham) na stránke CodePen.

Alebo, aby sme riadili rýchlosť animácie, mohli by sme offset-distancehodnotu urýchliť vynásobením hodnoty na 300%. Ak sme však zadali čas, ktorý animácia beží na hodnote väčšej, ako je čas potrebný na to, aby element prešiel cestu, potom sa pohyb zastaví, kým animácia nedokončí svoj interval pred opakovaním:

Pozrite si jednoduchý príklad pera animácie pozdĺž cesty od Geoffa Grahama (@geoffgraham) na stránke CodePen.

Podpora prehliadača

offset-distancenehnuteľnosť je stále považovaná za experimentálne funkcie v čase písania tohto článku, a neexistuje žiadna dokumentácia na podporu prehliadača. Existuje však dokumentácia o motion-pathpodpore, ktorú môžeme zatiaľ použiť ako základňu.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.