Funkcja CSS steps()

Definicja i użycie

CSS steps() Funkcja używana do tworzenia funkcji krokowych dla animacji.

Ta funkcja dzieli czas trwania animacji na równo długie przedziały określonej liczby (n). Na przykład: jeśli n wynosi 4, animacja zostanie podzielona na 4 części. Czas trwania od 0% do 100% zostanie podzielony na 4 części;分别是 0%-25%、25%-50%、50%-75% 和 75%-100%.

Przykład

Tworzenie różnych funkcji krokowych dla animacji:

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

Spróbuj sam

Gramatyka CSS

steps(n, step-position)
Wartość Opis
n Wymagane. Określa liczbę kroków/interwalów.
step-position

Opcjonalne. Określa czas, w którym następuje skok między wartościami. Użyj jednego z poniższych kluczy:

  • jump-start lub start: pierwszy krok ma miejsce na początku animacji
  • jump-end lub end: ostatni krok ma miejsce na końcu animacji. 'end' jest wartością domyślną
  • jump-none: nie ma wcześniejszych ani opóźnionych skoków
  • jump-both: jednoczesne przedwczesne i opóźnione skoki

Szczegóły techniczne

Wersja: CSS Easing Functions Level 1

Obsługa przeglądarek

Tabela zawiera liczby oznaczające wersje przeglądarek, które w pełni obsługują tę funkcję.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Strony związane

Odniesienie:Atrybut animation CSS

Odniesienie:Atrybut animation-timing-function CSS