Panduan Cara Membuat Animasi Css Bergerak dengan Animation Iteration Count Part #1
Senin, 29 Juli 2019
Halo para blogger mania, selamat beraktivitas. Bagaimana kabar Anda semua, apakah sehat selalu? Mudah-mudahan semuanya sehat selalu dan berada dalam lindungan-NYA, Amin.
Kabar gembira untuk Anda semua para pecinta animasi CSS. Khususnya pada tutorial kali ini, saya akan sedikit memberikan panduan bagaimana cara membuat animasi Css dengan jumlah iterasi atau bisa disebut juga "Animation Iteration Count".
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.
Untuk animation-iteration-count juga dapat berjalan tanpa batasan waktu, seperti berikut ini.
Jika Anda sudah mengerti, mari kita coba buat animasi ini menjadi berjalan berkali-kali atau tanpa berhenti. Seperti penampakan berikut ini:
Jika sudah, kita lanjut ke langkah berikutnya.
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.
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.
