Offset-polku - CSS-temppuja | CSS-almanakka 2025

Tämä ominaisuus aloitti elämänsä motion-path. 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.

offset-pathOmaisuus CSS määrittelee liikkeen polku elementin seurata aikana animaatio. Tässä on esimerkki SVG-polun syntaksista:

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

Tätä ominaisuutta ei voida animoida, vaan se määrittelee animaation polun. Käytämme motion-offsetominaisuutta animaation luomiseen. Tässä on yksinkertainen esimerkki liike-offsetin animoinnista @keyframes-animaatiolla:

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

Katso kynän yksinkertainen esimerkki polun animoimisesta CSS-temppujen avulla (@ css-tricks) CodePenissä.

Tässä esittelyssä oranssi ympyrä animoidaan offset-pathCSS: ssä asetettua pituutta pitkin . Piirrimme oikeastaan tämän polun SVG: ssä tarkalleen samoilla path()tiedoilla, mutta se ei ole välttämätöntä liikkeen saamiseksi.

Oletetaan, että piirrimme tällaisen funky-polun joissakin SVG-muokkausohjelmistoissa:

Löysimme polun, kuten:

dMääritteen arvo on, mitä olemme jälkeen, ja voimme siirtää sen suoraan CSS ja käyttää sitä offset-path:

Katso CSS-Tricksin kynä zEpLRo (@ css-tricks) CodePenistä.

Huomaa yksikön arvot polun syntaksissa. Jos käytät CSS: ää SVG: n elementtiin, kyseiset koordinaattiarvot käyttävät kyseisissä SVG: ssä määritettyä koordinaattijärjestelmää viewBox. Jos käytät liikettä johonkin muuhun HTML-elementtiin, nämä arvot ovat pikseleitä.

Huomaa myös, että käytimme grafiikkaa sormesta, joka osoittaa, kuinka elementti pyörii automaattisesti, jotta se osoittaisi eteenpäin. Voit hallita sitä seuraavilla tavoilla 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 */ )

Arvot

Niin hyvin kuin voimme kertoa, path()ja ne noneovat ainoat työarvot offset-path.

offset-pathOmaisuus on tarkoitus hyväksyä kaikki seuraavat arvot.

path(): Määrittää polun SVG-koordinaattien syntaksissa
url: Viittaa liikeradana käytettävän SVG-elementin tunnukseen
basic-shape: Määrittää muodon CSS Shapes -määrityksen mukaisesti, joka sisältää:
- circle()
- ellipse()
- inset()
- polygon()
Clippy on mahtava työkalu Basic Shape -arvojen luomiseen, muuten.
none: Ei määritä liikerataa ollenkaan

Tässä on joitain testejä:

Katso CSS-Tricksin (@ css-tricks) Kynän liikeradan arvotesti CodePenistä.

Jopa sanominen SVG-elementille viittaamaan polkuun, jolla sama SVG on määritelty, url()ei tunnu toimivan.

Web-animaatioiden sovellusliittymän avulla

Dan Wilson tutki joitain tästä julkaisussa Future Use: CSS Motion Paths. Sinulla on pääsy kaikkiin samoihin juttuihin JavaScriptissä Web-animaatioiden sovellusliittymän kautta. Oletetaan esimerkiksi, että olet määrittänyt offset-pathCSS: ssä a-arvon, voit silti hallita animaatiota JavaScriptin avulla:

Katso CSS-Tricksin kynä CSS MotionPath (@ css-tricks) CodePenistä.

Lisää esimerkkejä

Varoitus! Paljon näistä luotiin ennen siirtymistä liike- * nimeämisestä offset- *: een. Pitäisi olla melko helppo korjata ne, jos olet niin taipuvainen.

Katso Pen Whoosh! kirjoittanut Merih Akar (@merih) CodePenissä.

Katso Eric Willigersin (@ericwilligers) kynä pJarJO CodePenistä.

Katso Kseson (@Kseso) CodePeniltä Pen scalextric-auto liikeradalla.

Katso Ali Kleinin (@AliKlein) Pen CSS Motion Path -lentokone CodePenistä.

Katso Pen CSS Animate on SVG Path, kirjoittanut by (@yisi) CodePenissä.

Katso Dan Wilsonin (@danwilson) Pen Motion Path Infinity -koodikynä.

Katso Dan Wilsonin (@danwilson) kynän CSS-liikeradan spiraali CodePenistä.

Katso 一丝: n (@yisi) kynä zGzJYd CodePenistä.

Selaimen tuki

offset-pathOmaisuus pidetään edelleen kokeellinen ominaisuus tätä kirjoitettaessa. Jos selaimen tuen nykyinen puute saa sinut epäröimään sen käyttämistä projektissa, sinun kannattaa harkita GSAP: n käyttöä tämän tason animaatiossa, jonka Sarah myös käsittelee viestissään. Tämä tarjoaa sinulle laajimman selaintuen tällä hetkellä.

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

Työpöytä

Kromi	Firefox	IE	Reuna	Safari
46	72	Ei	79	Ei

Matkapuhelin / tabletti

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	Ei

Chrome 46: sta ja Opera 33: sta (ja niihin liittyvistä mobiiliversioista) lähtien meillä on "alkutuki" Blinkissä (ei lippua).

Onko olemassa toinen tapa tehdä tämä?

Oma Sarah Drasner kirjoitti SMIListä, SVG: n natiivista menetelmästä animaatioihin, ja siitä, miten animateMotionsitä käytetään esineiden animoimiseen SVG-polkua pitkin. Se näyttää:

Mutta SMIL on vanhentunut! Joten tätä ei suositella.

GreenSock on kuitenkin toinen tapa, jota suositellaan. Sarah puhuu tästä GSAP + SVG -käyttäjille: Liike pitkin polkua (SVG: tä ei vaadita). Esimerkki:

Katso Sarah Drasnerin (@sdras) automaattisen kääntämisen tosi / epätosi -kynän esittelystä CodePenissä.