Kali ini kita akan mempelajari tentang properti animation dan kelompoknya. Properti ini akan membuat elemen bergerak atau berubah bentuknya berdasarkan perubahan nilai properti. Animasi akan dimulai saat isi dari suatu elemen ditampilkan ke halaman. Untuk menggunakan properti animation, kita akan butuh "keyframes". Keyframes dibutuhkan sebagai nilai animation-name. Selain itu, kita juga harus menentukan durasinya dengan animation-duration.
Properti yang terkait dengan properti animation adalah :
- animation-name : nama keyframe animasi.
- animation-duration : durasi animasi.
- animation-iteration : mendefinisikan berapa kali animasi diulang.
- animation-direction: normal, reverse, alternate, alternate-reverse.
- animation-timing-function : Jenis perubahan kecepatan timing yang digunakan. Nilainya bisa berupa ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n).
- animation-fill-mode: none, forwards, backwards, both.
- animation : versi singkat dari properti-properti lainnya.
Tidak semua properti HTML bisa kalian animasikan. Properti yang pasti bisa kalian animasikan adalah properti terkait dengan ukuran, posisi, dan warna. Properti lainnya? Kalian bisa mencobanya sendiri
Keyframes
Keyframes digunakan untuk menunjukkan perubahan nilai properti di waktu-waktu tertentu. Keyframes bisa menggunakan from dan to untuk menentukan keadaan awal dan akhir dari suatu properti yang berubah selama animasi.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
@keyframes contoh{
from {background-color: red;}
to {background-color: yellow;}
}
.animasi{
height:40px;
width:80px;
background-color:red;
animation-name:contoh;
animation-duration:4s;
}
</STYLE>
</HEAD>
<BODY>
<div class="animasi">
<p>TEST</p>
</div>
</BODY>
</HTML>
Pada contoh di atas terlihat jelas bahwa animasi membutuhkan keyframes dan durasi. Keyframe mempunyai nama yang bisa digunakan pada properti animation-name. Dalam keyframes, ada properti from yang menandakan keadaan awal dari animasi dan to adalah yang menandakan keadaan akhir dari animasi.
Waktu Animasi dengan Persentase.
Selain dengan from dan to, kita bisa juga menggunakan persentase seperti contoh di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
@keyframes contoh{
0% {background-color: red;}
25% {background-color: orange;}
75% {background-color: yellow;}
100% {background-color: green;}
}
.animasi{
height:40px;
width:80px;
background-color:red;
animation-name:contoh;
animation-duration:4s;
}
</STYLE>
</HEAD>
<BODY>
<div class="animasi">
<p>TEST</p>
</div>
</BODY>
</HTML>
Animation-delay dan Animation-iteration
Kita juga bisa menentukan waktu penundaan animasi dengan animation-delay. Selain itu, kita juga bisa menentukan berapa kali animasi akan diulang.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
@keyframes contoh{
0% {width:40;height:40;}
25% {width:60;height:40;}
75% {width:60;height:60;}
100% {width:60;height:40;}
}
.animasi{
height:40px;
width:80px;
background-color:red;
animation-name:contoh;
animation-duration:4s;
animation-delay:2s;
animation-iteration:3;
}
</STYLE>
</HEAD>
<BODY>
<div class="animasi">
<p>TEST</p>
</div>
</BODY>
</HTML>
Pada contoh di atas, kita mengubah properti width, sekaligus height. Selain itu, kita juga menambahkan satu properti lagi yaitu animation-delay yang berguna untuk menunda "munculnya" animasi selama beberapa detik. Animasi juga bisa diulang-ulang selama beberapa kali dengan adanya animation-iteration-count.
Selain dengan angka- kita juga bisa memberikan nilai infinite pada animation-iteration-count supaya animasi diulang terus menerus saat halaman ditampilkan.
Properti Animation
Kita bisa menyingkatan penulisan semua properti yang sudah kita gunakan dengan menggunakan properti animation.
Polanya :
- animation : nama_keyframe delay perubahan_timing durasi perulangan arah_animasi
Contoh penggunaannya bisa kalian lihat di bawah ini.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
@keyframes contoh{
0% {width:40;height:40;}
25% {width:60;height:40;}
75% {width:60;height:60;}
100% {width:60;height:40;}
}
.animasi{
height:40px;
width:80px;
background-color:red;
animation: contoh 5s linear 2s infinite alternate;
}
</STYLE>
</HEAD>
<BODY>
<div class="animasi">
<p>TEST</p>
</div>
</BODY>
</HTML>