Offset-path - CSS-trükkök | CSS Almanach 2025

Ez a tulajdonság úgy kezdte az életét motion-path. Ezt és az összes többi kapcsolódó mozgás- * tulajdonságot a specifikációban offset- * névre keresztelik. Itt változtatjuk a neveket az almanachban. Ha most szeretné használni, akkor valószínűleg a legjobb mindkét szintaxist használni.

A offset-pathCSS tulajdonság meghatározza az animáció során követendő elemek mozgási útvonalát. Íme egy példa az SVG elérési útjának szintaxisára:

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

Ez a tulajdonság nem animálható, inkább meghatározza az animáció útját. A motion-offsettulajdonságot használjuk az animáció létrehozására. Íme egy egyszerű példa a mozgáseltolás animálására @keyframes animációval:

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

Lásd a Toll egyszerű példája az út mentén történő animációról CSS-trükkökkel (@ css-tricks) a CodePen-en.

Ebben a bemutatóban a narancssárga kört animáljuk offset-patha CSS-ben beállított mentén . Valójában pontosan ugyanazokkal az path()adatokkal vontuk le ezt az utat az SVG-ben , de ez nem szükséges a mozgás megszerzéséhez.

Tegyük fel, hogy egy ilyen funky utat rajzoltunk meg néhány SVG szerkesztő szoftverben:

Találnánk egy utat, például:

Az dattribútum értéke az, amire vágyunk, és egyenesen a CSS-be helyezhetjük, és a következőként használhatjuk offset-path:

Lásd a CSS-Tricks Pen @ zEpLRo-t (@ css-tricks) a CodePen-en.

Vegye figyelembe az egység nélküli értékeket az útvonal szintaxisában. Ha a CSS-t egy SVG elemre alkalmazza, akkor ezek a koordinátaértékek az adott SVG-n belül beállított koordinátarendszert fogják használni viewBox. Ha valamilyen más HTML elemre alkalmazza a mozgást, akkor ezek az értékek pixelek lesznek.

Vegye figyelembe azt is, hogy egy ujjal mutató grafikát használtunk annak bemutatására, hogy az elem hogyan forog automatikusan, így előre néz. Ezt a következőkkel szabályozhatja 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 */ )

Értékek

A lehető legjobban, amit meg tudunk mondani, path()és noneezek számára az egyetlen működő érték offset-path.

A offset-pathszálláshely feltételezhetően elfogadja az összes következő értéket.

path(): Megadja az útvonalat az SVG-koordináták szintaxisában
url: Hivatkozik egy mozgáspályaként használandó SVG elem azonosítójára
basic-shape: Megad egy alakzatot a CSS Shapes specifikációnak megfelelően, amely a következőket tartalmazza:
- circle()
- ellipse()
- inset()
- polygon()
A Clippy egyébként egy fantasztikus eszköz az Alapalak értékek előállításához.
none: Egyáltalán nem határoz meg mozgási utat

Íme néhány teszt:

Lásd a CSS-Tricks (@ css-tricks) tollal végzett mozgásútérték-tesztjét a CodePen-en.

url()Úgy tűnik, hogy még az sem mondható el, hogy egy SVG elemnek megadjuk az utat, amelyen keresztül meghatároztuk az ugyanazon SVG-t

A Web Animations API-val

Dan Wilson néhányat feltárt a Future Use: CSS mozgási útvonalakban. Hozzáférhet ugyanezekhez a JavaScript-hez a Web Animations API-n keresztül. Tegyük fel például, hogy definiált egy offset-pathCSS-t, továbbra is vezérelheti az animációt a JavaScript segítségével:

Lásd a CSS-Tricks Pen CSS MotionPath (@ css-tricks) oldalát a CodePen-en.

További példák

Fel a fejjel! Sok ilyen jött létre a motion- * elnevezésről az offset- * -re való váltás előtt. Nagyon könnyűnek kell lennie azok kijavításában, ha ennyire hajlik.

Lásd a Pen Whoosh-t! írta Merih Akar (@merih) a CodePen-en.

Lásd Eric Willigers (@ericwilligers) Pen pJarJO-ját a CodePen-en.

Lásd a Pen scalextric autót a mozgási úton Kseso (@Kseso) a CodePen-en.

Lásd Ali Klein (@AliKlein) Pen CSS mozgási út repülőgépét a CodePen-en.

Lásd: Pen CSS Animate on SVG Path by 一丝 (@yisi) a CodePen-en.

Lásd Dan Wilson (@danwilson) a Pen Motion Path Infinity című cikkét a CodePen-en.

Lásd Dan Wilson (@danwilson) Pen CSS mozgási út spirálját a CodePen-en.

Lásd a Pen zGzJYd-t by (@yisi) által a CodePen-en.

Böngésző támogatás

A offset-pathtulajdonság az írás idején még mindig kísérleti jellegű. Ha a böngészőtámogatás jelenlegi hiánya miatt nem hajlandó használni egy projektben, akkor érdemes megfontolni a GSAP használatát az animáció ilyen szintjére, amelyet Sarah a bejegyzésében is bemutat. Ez a legszélesebb böngészőtámogatást kínálja Önnek.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm	Firefox	AZAZ	Él	Szafari
46	72	Nem	79	Nem

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81.	Nem

A Chrome 46 és az Opera 33 (és a kapcsolódó mobil verziók) verziójától kezdve a „kezdeti támogatással” rendelkezünk a Blink szolgáltatásban (nincs jelző).

Van erre más módszer?

Saját Sarah Drasner írt a SMIL-ről, az SVG natív módszeréről az animációkhoz, és arról, hogyan animateMotionhasználják az objektumokat egy SVG-útvonal mentén. Úgy néz ki:

De a SMIL elavult! Tehát ez nem ajánlott.

A GreenSock egy másik módszer, bár ajánlott. Sarah erről beszél a GSAP + SVG for Power felhasználóknak: Mozgás útvonal mentén (SVG nem szükséges). Példa:

Sarah Drasner (@sdras) a CodePen-en olvassa el a Pen Demo for autoRotate true / false-t.