CSS steps() Fonksiyonu

Tanımı ve Kullanımı

CSS'nin steps() Bu fonksiyon, animasyon için adım zamanlama fonksiyonları oluşturmak içindir.

Bu fonksiyon, animasyon süresini belirtilen sayıda (n) eşit aralığa böler. Örneğin: n 4 olduğunda, animasyon 4 parçaya bölünür. Bu, 0% ile 100% arasında süreyi 4 parçaya böler; yani 0%-25%、25%-50%、50%-75% ve 75%-100%.

Örnek

Animasyon için farklı adım zamanlama fonksiyonları oluşturun:

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

Kendiniz Deneyin

CSS Güvenliği

steps(n, step-position)
Değer Açıklama
n Gerekli. Adım/ara aralığını belirtir.
step-position

Opsiyonel. Değerler arasındaki atlamaların gerçekleşme zamanını belirler. Aşağıdaki anahtar kelimelerden birini kullanın:

  • jump-start veya start: Animasyonun başında ilk adım gerçekleşir
  • jump-end veya end: Animasyonun sonunda son adım gerçekleşir. End, varsayılan değerdir
  • jump-none: Erken veya gecikmiş atlama gerçekleşmez
  • jump-both: Erken ve gecikmiş atlamalar birlikte gerçekleşir

Teknik Açıklamalar

Sürüm: CSS Easing Functions Level 1

Tarayıcı Desteği

Tablodaki rakamlar, bu işlevi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

İlgili Sayfalar

İlgili:CSS animation Özelliği

İlgili:CSS animation-timing-function Özelliği