CSS steps() funktion

Definition och användning

CSS steps() Funktionen används för att skapa stegtidsfunktioner för animationer.

Denna funktion delar upp animationens varaktighet i lika långa intervaller angivna av antalet (n). Till exempel: Om n är 4 kommer animationen att delas in i 4 delar. Det kommer att dela upp varaktiden från 0% till 100% i 4 delar;分别是 0%-25%、25%-50%、50%-75% 和 75%-100%.

Exempel

Skapa olika stegtidsfunktioner för 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);
}

Prova själv

CSS Syntax

steps(n, step-position)
Värde Beskrivning
n Obligatoriskt. Ange antalet steg/interval.
step-position

Valfritt. Anger när hopp mellan värden inträffar. Använd en av följande nyckelord:

  • jump-start eller start: Första steget inträffar vid animationens början
  • jump-end eller end: Sista steget inträffar vid animationens slut. End är standardvärdet
  • jump-none: Inget förskjutning eller fördröjning av hopp
  • jump-both: Samtidig förskjutning och fördröjning av hopp

Tekniska detaljer

Version: CSS Easing Functions Level 1

Webbläsarstöd

Tabellens siffror anger den första webbläsarversion som helt stöder denna funktion.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Relaterade sidor

Referens:CSS animation egenskap

Referens:CSS animation-timing-function egenskap