Properti animation-iteration-count digunakan untuk menentukan berapa kali siklus animasi dimainkan sebelum animasi berhenti.

Nilai awal adalah ‘1’, artinya animasi akan diputar dari awal hingga akhir satu kali.

Properti ini sering digunakan bersama dengan nilai arah animasi dari alternatif, yang akan menyebabkan animasi diputar secara terbalik pada siklus alternatif. Lihat bagian demo langsung di bawah ini untuk demo langsung.

Kalian dapat menentukan satu jumlah iterasi atau beberapa jumlah iterasi yang dipisahkan koma. Saat Kalian memberikan daftar jumlah iterasi yang dipisahkan koma, daftar ini biasanya dipetakan ke daftar nilai yang disediakan oleh properti terkait animasi lainnya, seperti penundaan animasi, fungsi pengaturan waktu animasi, dan properti nama animasi, di antara lainnya. Setiap daftar nilai dalam properti ini diperlakukan seperti array, di mana setiap nilai dalam daftar nilai memiliki indeks sendiri. Kemudian, setiap nilai dalam daftar nilai dipetakan ke nilai yang sesuai dengan indeks yang sama dalam daftar yang disediakan di properti lainnya.

Misalnya, jika Kalian memberikan dua nilai penghitungan animasi-iterasi, maka nilai pertama menentukan jumlah iterasi dari animasi dari animasi pertama dalam daftar nama animasi yang disediakan oleh nama-animasi, dan jumlah iterasi kedua menentukan jumlah iterasi dari animasi kedua.

Properti animation-iteration-count biasanya ditetapkan sebagai bagian dari singkatan properti animasi.

 

Official Syntax

  • Syntax:
  • Berlaku untuk: semua element; dan
  • pseudo-elements ::before dan ::after

 

Values

  • infinite: Animasi akan berulang tanpa batas.
  • <number>: Animasi akan mengulangi jumlah yang ditentukan. Jika angka tersebut bukan bilangan bulat, animasi akan berakhir di pertengahan siklus terakhirnya. Angka negatif tidak valid. Nilai ‘0’ valid dan, mirip dengan durasi animasi ‘0s’, menyebabkan animasi terjadi secara instan.

 

Examples

Berikut ini akan mengulangi animasi tanpa batas. Animasi akan dilanjutkan ke arah yang berbeda, untuk menghindari “lompatan” di antara siklus. Lihat demo langsung di bawah ini untuk contoh langsung.