Memahami Properti animation-iteration-count CSS dan Cara Menggunakannya

TokoDaring.Com – Memahami Properti animation-iteration-count CSS dan Cara Menggunakannya. Tanpa kontrol ini, animasi bisa terasa terlalu cepat selesai atau malah terlalu banyak berulang hingga mengganggu fokus pengguna. Properti animation-iteration-count memberi kita fleksibilitas penuh untuk menentukan ritme dan jumlah pengulangan yang ideal — mulai dari satu kali, beberapa kali, hingga terus menerus.

Mengenal animation-iteration-count: Mengatur Berapa Kali Animasi Berulang

Animasi dalam CSS dapat meningkatkan pengalaman pengguna secara visual dan interaktif. Namun, agar tidak berlebihan atau membingungkan, penting untuk mengatur seberapa sering sebuah animasi dijalankan. Di sinilah peran properti animation-iteration-count. Dengan properti ini, kita dapat mengatur jumlah pengulangan animasi sesuai kebutuhan desain.

Apa Itu animation-iteration-count?

animation-iteration-count adalah properti CSS yang digunakan untuk menentukan berapa kali sebuah animasi dijalankan. Nilai default-nya adalah 1, artinya animasi hanya terjadi satu kali. Namun, Anda bisa mengubah nilainya menjadi angka tertentu atau infinite untuk membuatnya terus berulang.

Contohnya:

.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: 3;
}

Animasi di atas akan berjalan tiga kali, lalu berhenti. Sementara jika menggunakan infinite, maka animasi akan berulang tanpa henti selama elemen tampil di layar.

Properti ini sangat berguna saat Anda ingin membuat animasi loading, efek hover berulang, atau transisi UI yang hanya perlu diputar beberapa kali saja.

Nilai yang Didukung oleh animation-iteration-count

1. Nilai Bilangan Bulat atau Desimal

Anda bisa menentukan angka berapa pun sebagai nilai, misalnya 1, 2, 5, atau bahkan 0.5. Nilai desimal seperti 2.5 akan memutar animasi dua kali penuh dan sekali lagi sampai setengahnya.

Nilai 0 berarti animasi tidak akan diputar sama sekali. Ini bisa berguna saat Anda ingin mendefinisikan animasi tetapi hanya memutarnya dalam kondisi tertentu (misalnya melalui JavaScript).

Contoh:

.element {
  animation: fade-in 1s ease-in-out 2.5;
}

2. Nilai infinite untuk Animasi Tanpa Akhir

Jika Anda ingin animasi terus berulang tanpa henti, gunakan nilai infinite. Ini sangat cocok untuk animasi dekoratif seperti ikon loading, latar belakang bergelombang, atau efek berkelanjutan yang tidak perlu berhenti.

Namun, perlu diingat bahwa terlalu banyak animasi infinite dalam satu halaman bisa membuat pengguna merasa lelah atau bahkan menurunkan performa.

.loader {
  animation: spin 1s linear infinite;
}

3. Perhatian Saat Menggabungkan Nilai

animation-iteration-count bisa digabung dengan properti animasi lainnya dalam shorthand animation. Posisi nilainya berada setelah durasi dan timing function. Penting untuk mengingat urutan jika menggunakan penulisan pendek agar tidak salah nilai.

Contoh shorthand:

.element {
  animation: slide 1s ease-in-out 4 alternate;
}

Dalam contoh di atas, animasi akan berulang empat kali secara bolak-balik.

Kapan dan Bagaimana Menggunakan animation-iteration-count Secara Efektif

1. Untuk Animasi Transisi yang Hanya Perlu Beberapa Kali

Jika Anda ingin animasi hanya tampil saat halaman dimuat atau saat elemen muncul, cukup gunakan nilai 1 atau 2. Ini menghindari efek animasi yang berlebihan dan memberi kesan profesional.

Misalnya, animasi teks yang muncul saat scroll hanya perlu terjadi satu kali agar tidak mengganggu fokus pengguna.

.fade-in-once {
  animation: fadeIn 1s ease-out 1;
}

2. Untuk Efek Berulang Seperti Loader atau Indikator Proses

Animasi seperti spinner, progress bar, atau titik-titik bergerak pada halaman loading biasanya diatur agar terus berulang dengan infinite. Ini memberikan kesan bahwa aplikasi masih berjalan atau sedang memproses sesuatu.

Gabungkan dengan animation-direction: alternate untuk efek bolak-balik yang lebih menarik.

3. Gunakan dengan Media Query untuk Performa dan Aksesibilitas

Tidak semua pengguna menyukai animasi yang terlalu sering muncul. Anda bisa menggunakan media query prefers-reduced-motion untuk menghentikan animasi jika pengguna mengaktifkan pengaturan tersebut di perangkat mereka.

@media (prefers-reduced-motion: reduce) {
  .element {
    animation-iteration-count: 1;
  }
}

Kombinasi Ideal dengan Properti Animasi Lain

Properti animation-iteration-count tidak berdiri sendiri. Untuk menghasilkan animasi yang halus dan menarik, properti ini sebaiknya dikombinasikan dengan:

• animation-duration: untuk mengatur durasi animasi.
• animation-direction: untuk menentukan arah pergerakan setiap siklus.
• animation-fill-mode: agar elemen tetap pada keadaan akhir setelah animasi selesai.
• animation-delay: untuk mengatur kapan animasi mulai dijalankan.

Misalnya:

.bounce {
  animation: bounce 1s ease-in-out 3 alternate;
}

Animasi di atas akan memantul tiga kali ke atas dan ke bawah, kemudian berhenti.

Atau:

.pulse-infinite {
  animation: pulse 2s ease-in-out infinite;
  animation-fill-mode: both;
}

Animasi denyut ini akan terus berulang, dan fill-mode: both memastikan elemen tetap tampil konsisten sebelum dan sesudah animasi.

Ringkasan, Memahami Properti animation-iteration-count CSS dan Cara Menggunakannya

animation-iteration-count adalah salah satu properti inti untuk mengatur seberapa sering animasi dijalankan dalam CSS. Dengan nilai berupa angka atau infinite, kita bisa menciptakan animasi satu kali, berkali-kali, atau tanpa henti. Properti ini memberikan kontrol penuh untuk menciptakan pengalaman visual yang seimbang, baik secara estetika maupun performa. Digunakan dengan bijak, properti ini membantu menciptakan antarmuka yang hidup tanpa mengganggu pengguna.

FAQ (Frequently Asked Question) atau Pertanyaan Umum tentang Properti animation-iteration-count CSS

Berikut adalah beberapa FAQ (Frequently Asked Question) tentang Memahami Properti animation-iteration-count CSS.