Animation Iteration Count dari CSS Animasi

27/11/2019    Risman Hakim    59     Website

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 :)

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More