Offset-etäisyys - CSS-temppuja | CSS-almanakka 2025

Tämä ominaisuus aloitti elämänsä motion-offset. Tämä ja kaikki muut siihen liittyvät liike- * ominaisuudet nimetään uudelleen offsetiksi *. Muutamme nimiä täällä almanakassa. Jos haluat käyttää sitä juuri nyt, kannattaa todennäköisesti käyttää molempia syntakseja.

motion-offsetOmaisuus CSS sanoo: kuinka pitkälle pitkin motion-patholet? Tämä on animoitava ominaisuus, joka liittyy liikeradoihin.

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

Yllä olevassa esimerkissä olemme asettaneet alkuarvoksi motion-offsetarvoksi 0%, vaikka on syytä huomata, että nolla on oletusarvo, vaikka sitä ei olisikaan nimenomaisesti määritelty (olisimme voineet jättää sen pois).

Muuttujat

offset-distanceOminaisuuden hyväksyy seuraavat arvot:

length
percentage

Molemmissa tapauksissa arvo määrittää etäisyyden pituuden polun alkupisteestä (oletus on 0pxtai 0%) polun loppupisteeseen.

Esimerkki

Tässä esimerkissä meillä on kaksi ympyrää, joissa yksi pieni ympyrä kulkee suuremman ympyrän polkua pitkin.

Tässä on SVG-tiedosto, jota käytämme piirtämään muodot:

Nyt voimme asettaa .markerluokan CSS: ssä seuraamaan .trackluokan koordinaatteja:

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

Katso Geoff Grahamin (@geoffgraham) kynän yksinkertainen esimerkki polun animoimisesta CodePenissä.

Vastaavasti voimme pysäyttää offset-distancearvon 50%: lla ja animaatio putoaisi polun puoliväliin:

Katso Geoff Grahamin (@geoffgraham) kynän yksinkertainen esimerkki polun animoimisesta CodePenissä.

Tai animaation nopeuden hallitsemiseksi voimme kertoa offset-distancearvon 300 prosenttiin nopeuttaaksemme asioita. Jos olemme kuitenkin määritelleet, kuinka kauan animaatio kulkee arvolla, joka on suurempi kuin mitä elementti vie polun kulkemiseen, liike pysähtyy, kunnes animaatio on suorittanut intervallinsa ennen toistamista:

Katso Geoff Grahamin (@geoffgraham) kynän yksinkertainen esimerkki polun animoimisesta CodePenissä.

Selaimen tuki

offset-distanceomaisuus pidetään edelleen kokeellinen ominaisuus tätä kirjoitettaessa eikä dokumentaatiota selain tukee. Tuesta on kuitenkin dokumentaatiota, motion-pathja voimme käyttää sitä toistaiseksi lähtötasona.

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.