Cara Menggunakan Property Animation Iteration Count CSS

Pada kesempatan kali ini saya akan menjelaskan cara menggunakan property animation -iteration-count CSS. Perlu teman-teman ketahui sebelumnya, fungsi property css animation-iteration-count adalah untuk menentukan berapa kali animasi harus dijalankan atau dimainkan. Seperti pada contoh kasus yang saya buat disini, dimana saya akan membuat animasi dari sebuah kotak biru yang berjalan dari atas ke bawah sebanyak 5 x. Dan untuk membuat animasi tersebut bisa ditentukan berapa x harus dijalankan disini saya menggunakan property css tersebut. Langsung saja kalian bisa salin kode yang saya buat seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan Property Animation Iteration Count CSS</title>
</head>
<style>
.kotak{
  width: 80px;
  height: 80px;
  background: blue;
  position: relative;
  margin:auto;
  -webkit-animation: mymove 3s;  /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: 5; /* Safari 4.0 - 8.0 */
  animation: mymove 3s;
  animation-iteration-count: 5;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}
</style>
<body>
<div class="kotak"></div>
</body>
</html>

Jika sudah kalian bisa simpan kode tersebut dan bisa kalian ujicobanya dibrowser.

Sampai disini penjelasan saya mengenai cara menggunakan property animation -iteration-count CSS, semoga bermanfaat.