Property Animation Pada CSS3
Property Animation Pada CSS3 – Pada CSS3 kita bisa membuat animasi dengan menggunakan property CSS3 transition dan property CSS3 animation. Untuk membuat animasi dengan menggunakan property CSS3 transition kita membutuhkan keadaaan awal dan keadaan akhir. Hanya 2 keadaan ketika kita menggunakan property CSS3 transition. Sedangkan dengan menggunakan property CSS3 animation kita bisa membuat animasi dengan beberapa keadaan di dalam keadaan awal dan akhir. Perhatikan gambar dibawah ini.
Untuk membuat animasi dengan menggunakan property CSS3 animation. Kita harus menggunakan sintak kode CSS seperti yang tampak pada gambar dibawah. Sintak kode css tersebut bisa dituliskan di bagian mana saja dalam file CSS. Sintak kode CSS tersebut juga tidak memerlukan selector. Kita cukup menuliskan keyword @keyframes diikuti dengan nama animasi yang bisa kita buat namanya bebas. Kemudian di dalam @keyframes tersebut, kita bisa tuliskan beberapa keadaan. Kalau hanya 2 keadaan, kita bisa tulis from untuk keadaan awal. Dan to untuk keadaan akhir. From nilainya bisa kita ubah menjadi 0%, sedangkan to nilainya bisa kita ubah menjadi 100%. Penggunaan nilai from dan to dengan menggunakan presentase akan sangat dibutuhkan ketika kita ingin membuat animasi dengan beberapa keadaan atau banyak keyframes. Seperti kita membuat keadaan pada 0%, 20%, 50%, 60% sampai dengan 100% di keadaan akhir.
Untuk menggunakan property CSS3 animation ini, pertama kita buat dulu animasinya dengan menggunakan sintak kode CSS keyframes. Selanjutnya step kedua kita baru gunakan pada selector yang ingin kita beri animasi. Untuk lebih jelas, silakan lihat contoh baris kode CSS dibawah gambar berikut:
 |
| Sintak Keyframe |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
.kotak {
width: 200px;
height: 200px;
background-image: linear-gradient(to right, yellow 20%, pink, salmon, pink, chartreuse 80%);
}
.kotak:hover {
animation: kotakGradient 2s;
}
@keyframes kotakGradient {
from {
width: 200px;
}
to {
width: 400px;
}
}
</style>
</head>
<body>
<div class="kotak"></div>
</body>
</html>
Untuk penulisan sintak CSS Animation, kita bisa menuliskannya seperti pada gambar dibawah ini. Ada 2 cara, kita bisa menggunakan shorthand-nya, apabila kita sudah paham benar bagaimana cara menggunakan satu persatu parameter seperti contoh di bawah penulisan shorthand. Ada 8 parameter nilai yang bisa kita tulis pada sintak CSS3 animation ini. 2 yang wajib yaitu name dan duration. Sedangkan untuk 6 parameter lainnya optional, yaitu : timing-function, delay, iteration-count, direction, fill-mode, dan play-state. Untuk masing-masing penjelasan parameter nilai dari sintak CSS3 animation ini, silakan lihat penjelasannya di bawah gambar berikut.
1. Name
Name adalah parameter yang wajib diisi sebagai nilai dari property CSS3 animation ini. Untuk pemberian nama bebas, asal sesuai dan sama dengan penggunaan nama pada @keyframes.
2. Duration
Durasi adalah parameter wajib yang ditulis pada baris kode property CSS3 animation. Durasi digunakan untuk menentukan berapa lama suatu elemen HTML berubah dalam beberapa keadaan dari awal sampai keadaan akhir. durasi bisa ditulis dengan angka yang memiliki satuan s / ms. s sama dengan second, sedangkan ms sama dengan millisecond atau seperseribu detik.
3. Timing Function
Salah satu parameter optional pada property CSS3 animation adalah timing function. Parameter ini berfungsi untuk menentukan jenis pergerakan apa yang akan dilakukan saat terjadi animasi. Setiap nilai dari timing function berbeda, tergantung dari kecepatan awal dan kecepatan akhir. Berikut jenis nilai timing function yang bisa kita pilih.
● ease adalah nilai default dari parameter timing function. Artinya apabila kita tidak menentukan jenis nilai timing function yang terjadi saat transition, maka yang akan berlaku timing function jenis ease.
● ease-in adalah jenis timing function dimana pergerakan awalnya pelan, makin lama makin cepat.
● ease-out adalah jenis timing function dimana pergerakan awalnya cepat, makin lama makin lambat.
● ease-in-out adalah jenis timing function dimana pergerakannya merupakan kombinasi ease-in dan ease-out.
● linear adalah jenis timing function dimana pergerakan mengatur kecepatannya seimbang searah garis lurus.
● cubic-bezier(w, x, y, z) adalah jenis timing function dimana arah pergerakkannya kita bisa atur dengan menggunakan sebuah kurva yang bisa menghasilkan sebuah persamaan. Nilai dari elemen ini kita bisa atur dengan menggunakan editor pada bagian developer tools-nya langsung, setelah cocok nilainya, baru kita copy-paste di kode editor agar permanen. Ikuti langkah berikut:
→ Klik kiri, kemudian pilih inspect. Bisa juga menggunakan shortcut-nya Ctrl+Shift+I. Atau bisa juga dari customize and control web browser dari bagian atas sebelah kanan browser yang ada icon 3 titik. Lalu kita pilih more tools, berikutnya pilih developer tools.
→ Cari elemennya yang mau di edit, dengan menggunakan icon tanda panah yang ada dalam kotak.
→ Klik cubic-bezier editornya.
→ Silakan buat kombinasi nilai pergerakan yang cocok.
→ Lalu copy-paste pada kode editor agar permanen.
4. Delay
Delay adalah parameter optional pada property CSS3 transition yang fungsinya untuk memberikan waktu tunggu sebelum menjalankan sebuah transition. Satuan yang digunakan sama seperti dengan durasi. Jadi kalau dalam satu baris kode, ada 2 durasi. Durasi yang ada di depan pasti durasi untuk melakukan transisi, sedangkan durasi yang selanjutnya adalah untuk delay. Satuannya kita bisa gunakan s ( second ) dan ms ( millisecond ). Jadi ketika kita ingin menggunakan 2 durasi ini, perhatikan perhitungan waktunya.
5. Iteration Count
Parameter iteration count berfungsi untuk menentukan berapa kali pengulangan. Kita bisa menggunakan angka atau keyword dengan nilai ‘infinite’ apabila animasi yang ingin dilakukan terus menerus berulang. Defaultnya 1x pengulangan, apabila kita tidak menentukan berapa jumlah iteration count-nya. Kita bisa menggunakan angka 1, 2, 3, 4, 10, … dan tak terhingga atau nilai dengan keyword infinite untuk berkreasi dengan menggunakan property CSS3 animation ini.
6. Direction
Direction adalah parameter untuk mengatur arah pergerakan animasi. Apabila kita tidak menentukan parameter nilai tersebut, maka nilai yang berlaku untuk parameter ini adalah normal, yang artinya akan bergerak dari awal ke akhir. Ada beberapa nilai yang bisa digunakan untuk parameter direction ini, yaitu sebagai berikut :
● normal adalah nilai default dari parameter direction ini, arah pergerakannya dari awal ke akhir.
● reverse adalah nilai yang arah pergerakan animasinya dari akhir ke awal. Nilai parameter reverse adalah kebalikan dari nilai normal, sebagai nilai defaultnya.
● alternate adalah nilai yang arah pergerakannya merupakan kombinasi atau berganti-ganti, tapi arah jalan pergerakannya tetap dari posisi awal. Jadi pergerakannya dari awal ke akhir, kemudian dari akhir ke awal, kemudian dari awal ke akhir, dan berganti-ganti seperti itu terus sampai berapa banyak nilai parameter iteration-count yang ditentukan. Pergerakan dengan kombinasi ini adalah pergerakan yang paling natural.
● alternate-reverse adalah arah pergerakan yang berkebalikan dengan nilai alternate. Apabila menggunakan pergerakan dengan nilai alternate-reverse, maka kombinasi pergerakkannya dimulai dari akhir. Jadi pergerakannya dari akhir ke awal, kemudian dari awal ke akhir, kemudian dari akhir ke awal, dan berganti-ganti seperti itu terus sampai berapa banyak nilai parameter iteration-count yang ditentukan.
7. Fill Mode :
Fill mode adalah parameter untuk menentukan akhir dari animasi terjadi. Apabila tidak ditentukan maka nilai defaultnya adalah none, yang artinya animasi berakhir pada posisi awal. Ada beberapa nilai dari parameter fill mode yang bisa digunakan. Nilai tersebut sebagai berikut:
● None adalah nilai default dari parameter fill mode dimana animasi akan berakhir pada posisi awal.
● forwards adalah nilai dari fill mode dimana animasi akan berakhir pada posisi akhir animasi. Jadi apabila kita tidak ingin animasinya langsung loncat ke awal, kita bisa menggunakan nilai forwards untuk parameter fill-mode.
● backwards adalah nilai dari fill mode dimana animasi akan berakhir pada posisi awal.
● Both adalah nilai fill mode dimana animasi akan berakhir pada posisi akhir ulangan baik itu di awal atau di akhir.
8. Play State
Parameter nilai play state ada 2 jenis yang bisa digunakan, yaitu : running dan paused. Secara default animasi yang terjadi apabila nilai parameter tidak ditentukan, maka nilainya adalah running. Apabila kita menggunakan nilai paused, maka animasinya otomatis tidak akan jalan. Biasanya untuk penggunaan paused kita gunakan dengan javascript, seperti untuk menghentikan animasi ditengah jalan.
Untuk penggunaan nilai dari parameter-parameter pada property CSS3 animation di atas. Silakan lihat contoh sintak dibawah ini, agar lebih jelas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
.kotak {
width: 200px;
height: 200px;
background-image: linear-gradient(to right, yellow 20%, pink, salmon, pink, chartreuse 80%);
animation: kotakGradient 3s ease-in 5 alternate forwards running;
}
@keyframes kotakGradient {
0% {
width: 200px;
}
50% {
width: 400px;
height: 200px;
}
100% {
width: 400px;
height: 400px;
}
}
</style>
</head>
<body>
<div class="kotak"></div>
</body>
</html>
Finally done untuk catatan saya mengenai property CSS3 animation. Semoga bisa bermanfaat untuk diri saya sendiri khususnya. Dan tentu saja buat teman-teman yang saat ini sedang belajar mengenai web design.
Dibawah ada source code untuk contoh penerapan property CSS3 animation. Apabila ada yang membutuhkan silakan download saja untuk source codenya. Siapa tahu bisa memberikan inspirasi buat karya teman-teman dalam bidang web design.
Happy blogging guys 😉😊😉😊 ......
Post a Comment for "Property Animation Pada CSS3"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan