Offset-anchor - CSS-tricks

Anonim

Den offset-anchoregenskapen definierar en punkt i lådan den appliceras som ankare som rör sig längs offset-path.

Det är ganska ordligt, så låt oss bryta ner det lite.

Du har ett element, säg en ruta:

Se Pen Orange Box av Geoff Graham (@geoffgraham) på CodePen.

Du vill att rutan ska röra sig längs en väg, säg en snurrande linje. Vi kan skapa den raden med SVG direkt i HTML-koden och använda den som offset-pathför rutan. Vi skapar animationen genom att använda offset-distancefastigheten:

Se Pen Orange Square on Path av Geoff Graham (@geoffgraham) på CodePen.

Bra bra. Men tänk om vi vill att lådan ska se ut som den hänger utanför linjen? Du vet, som en person som glider längs en zip-linje.

Det är där offset-anchorkommer in! Den markerar en plats på elementet och använder den för att placera elementet på vägen.

Här är ett exempel där tre olika rutor är fästa vid samma väg vid olika ankarpunkter:

Se Pen NMbEpy av Geoff Graham (@geoffgraham) på CodePen.

Syntax

.box ( offset-anchor: (auto | ); )

Värden

  • auto: Tar värdet offset-positionså länge det värdet inte också är autooch så länge det offset-pathär inställt på none.
  • position
    • : En enhet som beräknas utifrån den relativa bredden och höjden på behållaren den befinner sig i. Till exempel 50% 50%skulle vara dödpunkt. Observera att sökord fungerar här, precis som background-positionvar center centerskulle ge samma resultat.
    • : En enhet som förskjuter ankaret från det övre vänstra hörnet av elementets låda.

Det är värt att notera att det positionär en animerbar egenskap.

Webbläsarstöd

De offset-*egenskaper anses fortfarande vara en experimentell funktion vid tidpunkten för denna skrift. Om den nuvarande bristen på webbläsarstöd gör dig tveksam till att använda den i ett projekt, kanske du vill överväga att använda GSAP för denna animeringsnivå. Detta ger dig det bredaste webbläsarstödet just nu.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
46 72 Nej 79 Nej

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 85 81 Nej

Från och med Chrome 46 och Opera 33 (och relaterade mobilversioner) har vi "initialt stöd" i Blink (ingen flagga).

ytterligare information

  • Motion Path Module Level 1 Specifikation
  • WebKit-biljett # 139128
  • Mozilla-biljett # 1186329
  • Microsoft Edge-funktionsförfrågan