Perekaan kursus disarankan:

Fungsi steps() CSS

Definisi dan penggunaan CSS steps() Fungsi digunakan untuk mencipta fungsi masa buang berlangkah untuk animasi.

Fungsi ini membagi masa animasi kepada kepekatan haba yang sama yang ditentukan (n) bilangan. Contohnya: Jika n adalah 4, maka animasi akan dibahagikan kepada 4 bahagian. Ia akan membagi masa dari 0% hingga 100% kepada 4 bahagian; iaitu 0%-25%, 25%-50%, 50%-75% dan 75%-100%.

Contoh

Cipta fungsi masa buang berlangkah berbeza untuk animasi:

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

Cuba sendiri

Sintaksis CSS

steps(n, step-position)
Nilai Penerangan
n Wajib. Tentukan langkah/gesi.
step-position

Pilihan. Tentukan masa lompatan antara nilai. Gunakan salah satu kata kunci berikut:

  • jump-start atau start: Langkah pertama berlaku apabila animasi bermula
  • jump-end atau end: Langkah terakhir berlaku apabila animasi tamat. end adalah nilai lalai
  • jump-none: Tiada lompatan awal atau lewat
  • jump-both: Lompatan awal dan lewat berlaku secara serentak

Perincian teknikal

Versi: Fungsi Penyenawar CSS Level 1

Pemungutan bantuan pereka

Terdapat nombor di dalam tabel yang menunjukkan versi pereka paling awal yang menyokong fungsi ini.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Laman berkaitan

Rujukan:Atribut animation CSS

Rujukan:Atribut animation-timing-function CSS