Offset-distance - CSS-trikid | CSS-i almanahh 2025

See vara alustas elu motion-offset. Seda ja kõiki muid sellega seotud liikumise * omadusi nimetatakse spetsifikatsioonis ümber nihkeks *. Muudame siin almanahhis nimesid. Kui soovite seda kohe kasutada, kasutage tõenäoliselt mõlemat süntaksit.

motion-offsetVara CSS ütleb: kui kaugele mööda motion-pathsa oled? See on liikumisradadega seotud animeeritav omadus.

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

Ülaltoodud näites, oleme loonud algse motion-offsetväärtuse 0%, kuigi see on väärt märkimist, et null on vaikeväärtus, isegi kui ei ole selgesõnaliselt määratletud (oleksime võinud jätta, et välja).

Muutujad

offset-distanceVara saab kasutada järgmisi väärtusi:

length
percentage

Mõlemal juhul määrab väärtus kauguse pikkuse tee alguspunktist (vaikimisi on 0pxvõi 0%) tee lõpp-punktini.

Näide

Selles näites on meil kaks ringi, kus üks väike ring liigub suurema ringi teed mööda.

Siin on SVG-fail, mida kujundite joonistamiseks kasutame:

Nüüd saame .markeroma CSS-is klassi seadistada järgima .trackklassi koordinaate:

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

Vaadake CodePenilt Geoff Grahami (@geoffgraham) pliiatsi lihtsat näidet rööbastee animatsioonist.

Samamoodi võime offset-distanceväärtuse peatada 50% juures ja animatsioon langeks poole tee peal:

Vaadake CodePenilt Geoff Grahami (@geoffgraham) pliiatsi lihtsat näidet rööbastee animatsioonist.

Või animatsiooni kiiruse reguleerimiseks võiksime offset-distanceasja kiirendamiseks korrutada väärtuse 300% -ni. Kui oleme aga määranud aja, mille jooksul animatsioon töötab suurema väärtusega kui see, mis kulub elemendi raja läbimiseks, siis liikumine peatub, kuni animatsioon on enne kordamist intervalli täitnud:

Vaadake CodePenilt Geoff Grahami (@geoffgraham) pliiatsi lihtsat näidet rööbastee animatsioonist.

Brauseri tugi

offset-distancevara peetakse siiani katsefunktsioon ajal selle kirjalikult ja puudub dokumentatsioon brauseri tugi. motion-pathToetuse kohta on siiski olemas dokumentatsioon ja me võime seda esialgu lähtepunktina kasutada.

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.