Tutorial Belajar CSS 3 Part 7 – Membuat Animasi dengan CSS3
Selamat datang lagi di warungbelajar, dalam tutorial kali ini kita masih membahas mengenai CSS3, apa nih yang akan kita pelajari ??
ya kita akan belajar mengenai membuat Animasi dengan menggunakan CSS3, keren kan membuat animasi lho, kita akan belajar untuk membuat gerakan pada objek pada halaman web yang kita buat.
baik langsung saja kita mulai ya teman – teman kita akan belajar mengenai istilah – istilahnya di animasi CSS3.
Mengenal Keyframe
Keyframe, kata ini kalau kita pisah akan terdiri dari kata key dan frame,, kalau diartikan secara awam adalah kunci dari frame,,
pada animasi keyframe digunakan untuk membuat step – step perubahannya,, semisal nih kita buat animasi dari pergantian warna dari sebuah objek yang sebelumnya adalah berwarna merah jadi berwarna hijau, nah step awal warna (merah) dan menjadi warna (hijau) ini dibuat dengan menggunakan keyframe.
keyframe nantinya juga harus kita beri sebuah nama, yang akan dilinkkan pada property dari objek di skrip css,
nah biar gak tambah bingung silahkan perhatikan skrip dibawah ini sebagai contoh :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: contoh_animasi; /* untuk Safari 4.0 - 8.0 */ -webkit-animation-duration: 10s; /* untuk Safari 4.0 - 8.0 */ animation-name: contoh_animasi; /* standar skrip */ animation-duration: 10s; /* standar skrip */ } /* Standard syntax */ @keyframes contoh_animasi { from {background-color: red;width: 100px;height: 100px;} to {background-color: green;width: 300px;height: 300px;} } </style> </head> <body> <div></div> </body> </html> |
Semisal kita simpan dengan nama keyframe_css3.html, lalu silahkan buka di browser, maka hasilnya :
Keterangan :
- pada skrip @keyframes kita tuliskan nama animasinya adalah contoh_animasi
- pada @keyframes kita juga menentukan perubahan seperi apa yang ada di animasi tersebut
- from adalah awal dari animasi untuk warna objeknya adalah merah, dan memiliki lebar 100 pixel dan tinggi 100 pixel
- to adalah animasi yang dilakukan bagian from, disana tertulis warna objeknya berganti menjadi warna hijau, dan lebar jadi 300 pixel, dan tinggi 300 pixel.
- pada perintah css kita menentukan animasi mana yang akan diberikan pada objek di tag <div> kita menuliskan contoh_animasi, sesuai yang ada di keyframe.
- lalu kita tuliskan berapa lama waktu yang digunakan untuk animasi tersebut, dalam contoh tersebut saya tulis selama 10s, berarti animasi tersebut bergerak dalam waktu 10 detik.
Keyframes dengan presentase %
Jika dalam bagian sebelumnya kita sudah belajar mengenai fungsi @keyframes dengan menggunakan perintah from (awal) dan to(akhir).
Anda juga bisa menggunakan satuan presentase untuk mengatur pergerakan animasi, jadi anda bisa memberikan beberapa animasi sekaligus.
Jadi semisal gini..
- Sebuah objek awalnya berwarna merah,
- Ganti berwarna hijau
- Ganti berwarna biru
- Ganti berwarna kuning.
- Ganti berwarna hitam
nah perhatikan skripnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 4s; } /* Syntax untuk browser Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color:red;} 25% {background-color:green;} 50% {background-color:blue;} 75% {background-color:yellow;} 100% {background-color:black;} } /* Standard syntax */ @keyframes example { 0% {background-color:red;} 25% {background-color:green;} 50% {background-color:blue;} 75% {background-color:yellow;} 100% {background-color:black;} } </style> </head> <body> <div></div> </body> </html> |
Semisal kita simpan dengan nama keyframes_presentase.html, lalu kita buka maka hasilnya adalah sebagai berikut :
Keterangan :
- terlihat objeknya berwarna merah, hijau, biru, kuning, dan hitam.
Delay untuk animasi
Anda juga mensetting delay untuk animasi yang dijalankan dengan menggunakan perintah animation-delay, untuk contoh skripnya adalah seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 4s; animation-delay: 5s; } /* Syntax untuk browser Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color:red;} 25% {background-color:green;} 50% {background-color:blue;} 75% {background-color:yellow;} 100% {background-color:black;} } /* Standard syntax */ @keyframes example { 0% {background-color:red;} 25% {background-color:green;} 50% {background-color:blue;} 75% {background-color:yellow;} 100% {background-color:black;} } </style> </head> <body> <div></div> </body> </html> |
Maka hasilnya adalah sebagai berikut :
Keterangan :
- Animasi akan terdapat delay selama 5 detik.
Perulangan Animasi
Setelah kita belajar mengenai @keyframes dan animation-delay, berikutnya kita akan belajar mengenai perulangan terhadap animasi, dengan menggunakan perintah animation-iteration-count.
untuk contoh adalah sebagai berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 4s; animation-iteration-count: 5; } /* Syntax untuk browser Safari 4.0 - 8.0 */ @-webkit-keyframes example { 0% {background-color:red;} 25% {background-color:green;} 50% {background-color:blue;} 75% {background-color:yellow;} 100% {background-color:black;} } /* Standard syntax */ @keyframes example { 0% {background-color:red;} 25% {background-color:green;} 50% {background-color:blue;} 75% {background-color:yellow;} 100% {background-color:black;} } </style> </head> <body> <div></div> </body> </html> |
Semisal kita simpan menjadi keyframes_count.html, lalu kita buka maka hasilnya adalah sebagai berikut ini :
Keterangan :
- Animasi ditampilkan dan perulangan sebanyak 5 kali karena untuk value property animation-iteration-count:5;
Arah Pergerakan Animasi
Berikutnya kita akan belajar mengenai arah pergerakan dari animasi, arah pergerakan yang dimaksud adalah bergerak searah dengan perintah animasi atau sebaliknya…
property yang digunakan adalah animation-direction beberapa value yang bisa anda gunakan antara lain :
- normal – animasi bergerak searah dengan perintah yang ditulis, ini adalah value default
- reverse – animasi akan bergerak berlawan (terbalik) dari perintah animasi
- alternate – animasi akan berjalan sesuai perintah yang ditulis, lalu berikutnya berjalan sebaliknya
- alternate-reverse – animasi akan berjalan berlawanan, lalu berikutnya berjalan sesuai perintah yang ditulis
untuk lebih memahami silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <style> body{ border:solid 1px white; height:150px; } div { width: 20px; height: 20px; background-color: red; position: relative; -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ -webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */ animation-name: example; animation-duration: 4s; animation-direction: normal; animation-iteration-count: infinite; } /* perintah untuk browser safari 4 - 8 */ @-webkit-keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:100px; top:0px;} 50% {background-color:blue; left:100px; top:100px;} 75% {background-color:green; left:0px; top:100px;} 100% {background-color:red; left:0px; top:0px;} } /* syntax standart browser */ @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:100px; top:0px;} 50% {background-color:blue; left:100px; top:100px;} 75% {background-color:green; left:0px; top:100px;} 100% {background-color:red; left:0px; top:0px;} } </style> </head> <body> <div></div> </body> </html> |
Semisal kita simpan dengan nama keyframes_direction.html, maka hasilnya adalah :
Keterangan :
- animasi akan berjalan sesuai dengan alur yang dtuliskan, karena property animation-direction:normal;
- untuk pergerakan adalah dimulai dari objek berada dikiri atas, lalu ke kanan atas, lalu ke kanan bawah, dan ke kiri bawah
- animasi juga akan berjalan secara terus menerus karena property animation-iteration-count dengan value infinate;
Value Reverse
Keterangan :
animasi akan dijalankan berlawanan arah karena property animation-direction:reverse;
Value alternate
Keterangan :
Animasi akan dijalankan searah dengan alur animasi, lalu berikutnya dijalankan terbalik arah untuk animasinya.
Value alternate-reverse
Keterangan :
Animasi akan dijalankan terbalik arah dari alur animasi, lalu berikutnya akan dijalankan sesuai alur animasi
Nah jadi kurang lebih seperti itu ya teman – teman beberapa property yang bisa anda gunakan untuk membuat animasi sederhana dengan menggunakan CSS3, sebenarnya masih banyak sekali property yang bisa anda gunakan, jika ada yang ingin di diskusikan silahkan di kolom komentar,, baik sekian dulu tutorial kali ini sampai jumpa di tutorial selanjutnya.
