CSS offset-path egenskab

Definition og brug

offset-path Egenskab bruges til at oprette en sti til animationselementer.

Eksempel

Opret en sti til animation <div>:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

Prøv det selv

CSS syntaks

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Egenskabsværdi

Værdi Beskrivelse
none Standard. Elementets standard offset-path egenskabsværdi.
path() Brug af SVG syntaks til at specificere stien. Se:SVG sti.
ray() Brug af CSS ray() funktion til at specificere stien.
url() Brug af SVG-filens URL til at specificere stien.
<basic-shape> Brug af CSS-funktioner (som inset(), circle(), ellipse() eller polygon()) til at definere grundlæggende former for at specificere stien.
<coord-box> Brug af koordinatboks til at specificere stien.
initial Sæt denne egenskab til dens standardværdi. Se initial.
inherit Arv denne egenskab fra sin forældrelement. Se inherit.

Tekniske detaljer

Standardværdi: none
Arvbarhed: Nej
Animation production: Understøttelse. Se:Animation relaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

Browserstøtte

Tallene i tabellen viser den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
55 79 72 15.4 45

relaterede sider

Tutorial:SVG sti

Tutorial:CSS animation

Reference:CSS offset egenskab

Reference:CSS offset-anchor egenskab

Reference:CSS offset-distance egenskab

Reference:CSS offset-position egenskab

Reference:CSS offset-rotate egenskab