Tetapi animasi ini hanya dapat berjalan sekali dikarenakan tidak adanya animasi iterasi didalamnya. Nah, lalu Bagaimana jika kita ingin animasi ini berjalan berkali-kali atau bahkan tidak berhenti? Dalam hal memuat animasi, kita mungkin menginginkan animasi menjadi tak terbatas. Maka dari itu, disinilah animasi-iterasi-hitung berperan.
Mungkin kita langsung saja untuk cara dan langkah-langkah pembuatannya, bisa Anda lihat dibawah.
Yang pertama, perhatikan jika kita ingin animasi berjalan dengan jumlah iterasi sebanyak 5 kali, maka kita harus menambahkan iteration count nya, seperti contoh dibawah.
div {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: 5s;
}
Untuk animation-iteration-count juga dapat berjalan tanpa batasan waktu, seperti berikut ini.
div {
animation-name: spin;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Jika Anda sudah mengerti, mari kita coba buat animasi ini menjadi berjalan berkali-kali atau tanpa berhenti. Seperti penampakan berikut ini:
div {
-webkit-animation-name: spin;
animation-name: spin;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Jika sudah, kita lanjut ke langkah berikutnya.
<style>
* {
box-sizing: border-box;
}
html, body {
align-items: center;
background: linear-gradient(45deg, rebeccapurple, dodgerblue);
display: flex;
justify-content: center;
margin: 0;
min-height: 100vh;
padding: 0;
width: 100vw;
}
div {
background-color: #2eec71;
height: 100px;
width: 100px;
}
</style>
<div></div>
Untuk style CSS nya, bisa Anda ubah sesuai keinginan masing-masing. Ubah di bagian background-color dan body.
Sampai disini, dapat dipastikan bahwa kita sudah selesai membuatnya. Untuk menjalankannya, Anda coba akses dengan browser masing-masing dan lihat bagaimana hasilnya.