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

See vara alustas elu motion-path. 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.

offset-pathVara CSS määratleb liikumisrada element jälgida jooksul animatsiooni. Siin on näide SVG-tee süntaksist:

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

Seda omadust ei saa animeerida, vaid see määratleb animatsiooni tee. Atribuuti kasutame motion-offsetanimatsiooni loomiseks. Siin on lihtne näide liikumise nihke animatsioonist @keyframes animatsiooniga:

.thing-that-moves ( 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 ( 100% ( motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ ) )

Vaadake CodePenilt lihtsat näidet CSS-trikkide (@ css-tricks) abil teelt animeerimise kohta.

Selles demos animeeritakse oranž ring mööda offset-pathCSS-is määratud seadet. Tõmbasime selle tee SVG-s täpselt samade path()andmetega, kuid see pole liikumise saamiseks vajalik.

Oletame, et joonistasime mõnes SVG redigeerimistarkvaras sellise funky tee:

Leiame sellise tee nagu:

dAtribuudi väärtus on see, mida me pärast, ja me saame seda liigutada otse CSS ja kasutada seda kui offset-path:

Vaadake CodeSenil CSS-Tricksi sulepead Pen zEpLRo (@ css-tricks).

Pange tähele tee süntaksis ühikuta väärtusi. Kui rakendate CSS-i SVG elemendile, kasutavad need koordinaatide väärtused selle SVG-s loodud koordinaatide süsteemi viewBox. Kui rakendate liikumist mõnele muule HTML-elemendile, on need väärtused pikslid.

Pange tähele, et näitasime, kuidas sõrm osutab sõrme, et näidata, kuidas elementi automaatselt pööratakse, nii et see näeks kuidagi ettepoole. Saate seda kontrollida offset-rotate:

.mover ( offset-rotate: auto; /* default, faces forward */ offset-rotate: reverse; /* faces backward */ offset-rotate: 30deg; /* set angle */ offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */ )

Väärtused

Nii hästi kui oskame öelda path()ja nonenende jaoks on ainsad tööväärtused offset-path.

offset-pathVara peaks aktsepteerima kõik järgmised väärtused.

path(): Määrab tee SVG-koordinaatide süntaksis
url: Viitab liikumisteena kasutatava SVG elemendi ID-le
basic-shape: Määrab kuju vastavalt CSS-i kujundite spetsifikatsioonile, mis sisaldab järgmist:
- circle()
- ellipse()
- inset()
- polygon()
Clippy on muide vinge tööriist Basic Shape väärtuste loomiseks.
none: Ei määra üldse liikumisteed

Siin on mõned testid:

Vaadake CodeSenil CSS-Tricksi (@ css-tricks) Pen'i liikumisraja väärtuste testi.

Isegi SVG elemendi käskimine viidata teele, mille kaudu on määratletud sama SVG, url()ei tundu toimivat .

Veebianimatsioonide API-ga

Dan Wilson uuris mõnda sellest teemal Tuleviku kasutamine: CSS-i liikumisteed. Veebianimatsioonide API kaudu on teil kõigil samadel JavaScripti asjadel juurdepääs. Näiteks oletame, et olete offset-pathCSS-is määratlenud a , saate siiski animatsiooni juhtida JavaScripti kaudu:

Vaadake CodePeni saidil CSS-Tricks Pen CSS MotionPath (@ css-tricks).

Veel näiteid

Pea püsti! Paljud neist loodi enne üleminekut liikumisele * nime andmisele ofsetile *. Peaks olema neid üsna lihtne parandada, kui olete nii kallutatud.

Vaadake Pen Whoosh! autor Merih Akar (@merih) saidil CodePen.

Vaadake CodePenilt Eric Willigersi (@ericwilligers) pliiatsit pJarJO.

Vaadake Kseso (@Kseso) CodePenil Pen Scalextric autot liikumisteel.

Vaadake Code CSenis Ali Kleini (@AliKlein) Pen CSS liikumisraja lennukit.

Vaadake Pen CSS Animate on SVG Path poolt 一丝 (@yisi) CodePenis.

Vaadake Code Wenilt Dan Wilsoni (@danwilson) pliiatsi liikumisraja lõpmatust.

Vaadake Code Wenilt Dan Wilsoni (@danwilson) Pen CSS-i liikumisteede spiraali.

Vaadake CodePenil the (@yisi) pliiatsit zGzJYd.

Brauseri tugi

offset-pathVara peetakse siiani katsefunktsioon ajal seda kirjalikult. Kui praegune brauseritoe puudumine sunnib teid selle projektis kasutama, siis võiksite kaaluda GSAP-i kasutamist selle animatsioonitaseme jaoks, mida Sarah ka oma postituses kajastab. See pakub teile praegu kõige laiemat brauserituge.

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

Töölaud

Chrome	Firefox	IE	Edge	Safari
46	72	Ei	79	Ei

Mobiil / tahvelarvuti

Android Chrome	Android Firefox	Android	iOS-i Safari
88	85	81	Ei

Alates Chrome 46 ja Opera 33 (ja sellega seotud mobiiliversioonidest) on meil Blinkis (esialgne tugi) (lipp puudub).

Kas on veel üks võimalus seda teha?

Meie enda Sarah Drasner kirjutas SMG-st, SVG-i loomulikust animatsioonimeetodist ja sellest, kuidas animateMotionkasutatakse SVG-teelt objektide animeerimiseks. See näeb välja nagu:

Kuid SMIL on iganenud! Nii et see pole soovitatav.

GreenSock on siiski veel üks viis, mis on soovitatav. Sarah räägib sellest GSAP + SVG-s elektrikasutajatele: liikumine mööda rada (SVG pole vajalik). Näide:

Vaadake Sarah Drasneri (@sdras) CodePeni saidil Auto Demot for autoRotate true / false.