CSS steps() -funktio

Määrittely ja käyttö

CSS: steps() Funktioita käytetään animaation askelten aikataulutusfunktioiden luomiseen.

Tämä funktio jakaa animaation keston määritettyyn määrään (n) yhtä suuria jaksoja. Esimerkiksi: jos n on 4, animaatio jaetaan neljään osaan. Se jakaa keston 0%:sta 100%:iin neljään osaan; 0%-25%, 25%-50%, 50%-75% ja 75%-100%

Esimerkki

Luo erilaisia askelten aikataulutusfunktioita animaatiolle:

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

Kokeile itse

CSS syntaksi

steps(n, step-position)
Arvo Kuvaus
n Välttämätön. Määritä askelten/erien määrä.
step-position

Valinnainen. Määritä arvojen välillä tapahtuvan hyppäämisen aika. Käytä seuraavista avainsanoista yhdessä:

  • jump-start tai start：Animaation ensimmäinen askel tapahtuu animaation alussa
  • jump-end tai end：Animaation viimeinen askel tapahtuu animaation lopussa. end on oletusarvo
  • jump-none：Ennenaikaista tai myöhäistä hyppäämistä ei tapahdu
  • jump-both：Samanaikaisesti tapahtuu ennenaikainen ja myöhäinen hyppääminen

Tekninen yksityiskohta

Versio: CSS Easing Functions Level 1

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä toimintoa.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Tiedot

Viittaus:CSS animation ominaisuus

Viittaus:CSS animation-timing-function ominaisuus