Vzdálenost odsazení - Triky CSS

Tato vlastnost začala život jako motion-offset. Toto a všechny další související vlastnosti motion- * jsou ve specifikaci přejmenovány offset- *. Měníme jména zde v almanachu. Pokud ji chcete použít právě teď, pravděpodobně nejlépe použijte obě syntaxe.

motion-offsetNemovitost v CSS říká: jak daleko podél motion-pathjste? Toto je animovatelná vlastnost spojená s pohybovými cestami.

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

Ve výše uvedeném příkladu jsme nastavili počáteční motion-offsethodnotu na 0%, i když stojí za zmínku, že nula je výchozí hodnota, i když není výslovně definována (to jsme mohli vynechat).

Proměnné

Ubytovací zařízení offset-distancepřijímá následující hodnoty:

length
percentage

V obou případech hodnota určuje délku vzdálenosti od počátečního bodu cesty (výchozí hodnota je 0pxnebo 0%) do koncového bodu cesty.

Příklad

V tomto příkladu máme dva kruhy, kde jeden malý kruh cestuje po dráze většího kruhu.

Tady je soubor SVG, který používáme k kreslení tvarů:

Nyní můžeme nastavit .markertřídu v našem CSS tak, aby sledovala .tracksouřadnice třídy:

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

Podívejte se na jednoduchý příklad pera animace podél cesty od Geoffa Grahama (@geoffgraham) na CodePen.

Podobně můžeme zastavit offset-distancehodnotu na 50% a animace by vypadla do poloviny cesty:

Podívejte se na jednoduchý příklad pera animace podél cesty od Geoffa Grahama (@geoffgraham) na CodePen.

Nebo abychom mohli řídit rychlost animace, mohli bychom tuto offset-distancehodnotu znásobit na 300%, abychom věci urychlili. Pokud jsme však určili dobu, po kterou animace běží na hodnotě větší, než jakou elementu trvá cesta, pak se pohyb zastaví, dokud animace nedokončí svůj interval před opakováním:

Podívejte se na jednoduchý příklad pera animace podél cesty od Geoffa Grahama (@geoffgraham) na CodePen.

Podpora prohlížeče

offset-distancenemovitost je stále považována za experimentální funkce v době psaní tohoto článku, a neexistuje žádná dokumentace na podporu prohlížeče. Existuje však dokumentace o motion-pathpodpoře, kterou můžeme prozatím použít jako základ.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.