CSS steps() funktion

Definition og brug

CSS' steps() Funktionen bruges til at oprette trinbaserede tidsfunktioner til animationer.

Denne funktion deler animationens varighed i lige store intervaller af angivet antal (n). For eksempel: Hvis n er 4, deles animationen i 4 dele. Det deler varigheden fra 0% til 100% i 4 dele; nemlig 0%-25%, 25%-50%, 50%-75% og 75%-100%

Eksempel

Opret forskellige trinbaserede tidsfunktioner til animationer:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Prøv det selv

CSS-syntaks

steps(n, step-position)
Værdi Beskrivelse
n Obligatorisk. Angiv antallet af trin/interval.
step-position

Valgfri. Angiv tiden for, hvor跳跃 mellem værdierne forekommer. Brug en af følgende nøgleord:

  • jump-start eller start: Det første trin forekommer ved starten af animationen
  • jump-end eller end: Den sidste trin forekommer ved afslutningen af animationen. End er standardværdi
  • jump-none: Ingen for tidlig eller forsinket spring opstår
  • jump-both: Samtidig forekommer både for tidlig og forsinket spring

Tekniske detaljer

Version: CSS Easing Functions Level 1

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne funktion.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Relaterede sider

Referencer:CSS animation property

Referencer:CSS animation-timing-function property