CSS steps() functie

Definitie en gebruik

CSS steps() De functie wordt gebruikt om stap计时functies voor animaties te maken.

Deze functie deelt de animatieduur in gelijke intervallen van de gespecificeerde hoeveelheid (n). Bijvoorbeeld: als n 4 is, wordt de animatie in 4 delen verdeeld. Het deelt de duur van 0% tot 100% in 4 delen; respectievelijk 0%-25%, 25%-50%, 50%-75% en 75%-100%

Voorbeeld

Maak verschillende stap计时functies voor animaties:

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);
}

Probeer het zelf

CSS syntaxis

steps(n, step-position)
Waarde Beschrijving
n Verplicht. Specificeer het aantal stappen/interval.
step-position

Optioneel. Specificeer de tijd waarop sprongen tussen waarden plaatsvinden. Gebruik een van de volgende sleutelwoorden:

  • jump-start of start: De eerste stap vindt plaats bij het begin van de animatie
  • jump-end of end: De laatste stap vindt plaats aan het einde van de animatie. End is de standaardwaarde
  • jump-none: Geen vroege of late sprongen
  • jump-both: Simultane vroege en late sprongen

Technische details

Versie: CSS Easing Functions Level 1

Browserondersteuning

Tafelnummers vertegenwoordigen de browserversie die de functie volledig ondersteunt.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Gerelateerde pagina's

Referentie:CSS animation Eigenschap

Referentie:CSS animation-timing-function Eigenschap