Eltolt távolság - CSS-trükkök

Ez a tulajdonság úgy kezdte az életét motion-offset. 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 motion-offsetCSS-ben található ingatlan azt mondja: meddig motion-pathvagy? Ez a mozgási utakhoz társított animálható tulajdonság.

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

A fenti példában beállítottuk a kezdeti motion-offsetértéket 0%, bár érdemes megjegyezni, hogy a nulla az alapértelmezett érték, még akkor is, ha nincs kifejezetten meghatározva (ezt el is hagyhattuk).

Változók

A offset-distanceszálláshely a következő értékeket fogadja el:

length
percentage

Mindkét esetben az érték meghatározza az útvonal kezdőpontjától (alapértelmezés szerint 0pxvagy 0%) az útvonal végpontjáig terjedő távolság hosszát .

Példa

Ebben a példában két körünk van, ahol egy kis kör halad egy nagyobb kör útján.

Itt van az SVG fájl, amelyet az alakzatok rajzolásához használunk:

Most beállíthatjuk az .markerosztályt a CSS-ben, hogy kövesse az .trackosztály koordinátáit:

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

Lásd: Geoff Graham (@geoffgraham) a CodePen tollpéldájának egyszerű animációja egy útvonalon.

Hasonlóképpen leállíthatjuk az offset-distanceértéket 50% -nál, és az animáció félúton elesik:

Lásd: Geoff Graham (@geoffgraham) a CodePen tollpéldájának egyszerű animációja egy útvonalon.

Vagy az animáció sebességének szabályozásához megsokszorozhatjuk az offset-distanceértéket 300% -ra a dolgok felgyorsítása érdekében. Ha azonban megadtuk, hogy mennyi ideig fut az animáció nagyobb értéken, mint amennyi az elemnek az útvonal megtételéhez kell, akkor a mozgás addig áll le, amíg az animáció meg nem ismétli az intervallumot:

Lásd: Geoff Graham (@geoffgraham) a CodePen tollpéldájának egyszerű animációja egy útvonalon.

Böngésző támogatás

a offset-distancetulajdonság még mindig kísérleti jellegűnek számít az írás idején, és nincs dokumentáció a böngésző támogatásáról. Van azonban dokumentáció a motion-pathtámogatásról, és ezt egyelőre alapként használhatjuk.

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.