Animation Iteration Count dari CSS Animasi

Animation Iteration Count dari CSS Animasi - Pada CSS Animasi terdapat properti animation-iteration-count yang bisa kita gunakan untuk menentukan jumlah animasi yang akan dijalankan pada sebuah elemen. Penggunaan properti animation-iteration-count digunakan jika sudah ditentukan suatu animasi pada elemenn maka dari itu biasanya penggunaan properti ini bisa jadi hanya pilihan saja dan tergantung kebutuhan. Berikut akan saya praktekan bagaimana properti animation-iteration-count diaplikasikan pada sebuah elemen.

Contoh berikut adalah animasi sederhana dari perubahan ukuran elemen dengan menentukan berapa kali animasi perubahan nya. Kalian bisa ketikan sintak HTML dan CSS berikut ini untuk demo properti animation-iteration-count.

<head>
  <meta charset="UTF-8">
  <title>Animation Iteration Count dari CSS Animasi</title>
  <style>
    div {
      width: 10px;
      height: 50px;
      background-color: blue;
      position: relative;
      animation-name: ukuran;
      animation-duration: 5s;
      animation-iteration-count: 3;
    }
    @keyframes ukuran {
      from  {width: 10px;}
      to    {width: 500px;}
    }
</style>
</head>
<body>
  <div></div>
</body>

Dari sintak diatas telah diset animasi dengan @keyframes untuk melakukan perubahan ukuran dari 10px ke 500px kemudian properti animation-iteration-count ditambahkan untuk menentukan jumlah animasi yang dijalankan, pada kasus diatas perubahan animasi yang dijalankan pada elemennya adalah sebanyak 3 kali. Untuk melihat hasil animasi yang dijalankan silahkan buka pada browser masing - masing.

Baiklah, cukup sekian pembahasan dan tutorial sederhana CSS tentang Animation Iteration Count dari CSS Animasi, semoga pembahasan CSS ini bermanfaat. Selamat mencoba dan sampai jumpa :)

27 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat