Memanfaatkan CSS Animasi [Part 2] Oleh: Christian Rosandhy
Ini adalah tutorial lanjutan dari Part 1,, Kali ini kita akan belajar menggunakan CSS 3 Animation untuk membuat animasi yang jauh lebih dinamis lagi dari yang sebelumnya. Buat yang penasaran, yuk disimak.. :)
Salam jagocoding.. Seperti yang sudah saya sampaikan di tutorial saya sebelumnya,, Memanfaatkan CSS Animasi dan Transisi Part 1 Sekarang saya akan melanjutkan kembali, tapi hanya akan spesifik ke animasi. Kenapa? Karena CSS Transisi sih menurut saya cuma dipake segitu-gitu aja kayak di part 1.. Sedangkan CSS Animasi masih punya banyak fitur yang menarik yang bisa dibahas.. :D Kita review sedikit dulu ya.. Masih ingat ya kalau CSS Transition itu membutuhkan bantuan 1 komponen yang sama yg dibantu dengan pseudo class seperti :hover atau :focus. Sedangkan CSS Animation membutuhkan bantuan 1 perintah CSS @keyframes. Dari contoh di part 1 itu kita sudah membuat animasi yang terus berjalan tanpa perlu bantuan kursor seperti di Transition. Di part 2 ini, kita akan belajar membuat animasi yang lebih dinamis lagi. Yuk disimak,,
Seperti biasa, kita buat dulu HTMLnya.. Untuk di tutorial kali ini sih nggak perlu tag banyak2 untuk ngertiin animasi,, cukup seperti ini saja..
Saya adalah sebuah animasi
Setelah itu, langkah selanjutnya masih sama seperti yang dulu.. kita desain dulu si layer .animasi ini di CSS.. Di bagian ini sih bebas aja deh.. Cuma di tutorial ini saya kasi contoh yang penting ada width, height, dan backgroundnya biar layernya keliatan.. :D .animasi{ width:150px; height:100px; font-family:Calibri, Verdana, sans-serif; font-size:20px; font-weight:bold; background:#d00; color:#fff; text-align:center; } Hasil sementaranya masih seperti ini.. :)
Nah, selanjutnya langkahnya masih sama, yaitu membuat @keyframes. Akan tetapi di bagian ini ada sedikit yang beda.. Kalau kemarin kita membuat @keyframes dengan struktur seperti @keyframes nama_animasi{ from{property:value; property2:value2; .... } to{property:value; property2:value2; .... } } Struktur tersebut adalah struktur paling simpel yang hanya menyediakan titik awal animasi (from), dan titik akhir animasi (to), sehingga biarpun animasi bisa diulang-ulang akan tetapi hasilnya ya 2 titik itu saja yang diulang-ulang. Sekarang kita akan belajar membuat animasi dengan banyak titik animasi. Disini kita tidak menggunakan from atau to lagi, melainkan dengan bantuan angka dalam satuan % seperti ini : @keyframes nama_animasi{ 0% {property:value; property2:value2; ....} 25% {property:value; property2:value2; ....} 50% {property:value; property2:value2; ....} 75% {property:value; property2:value2; ....} 100% {property:value; property2:value2; ....} } Nah,, seperti yang kita lihat, dengan struktur persenan seperti di atas ini, animasi yang ditampilkan akan memungkinkan jadi lebih dinamis.. angka yang saya berikan pun hanya contoh, angka persenan itu bisa diisi angka berapapun (0%-100%). Dan jangan lupa dibuatkan prefix -webkit-, -moz-, -o-, dan -ms- untuk browser jadul ya.. @keyframes wow{ 0% {width:200px; height:75px; background:#370; color:#ff0;} 25% {width:75px; height:200px; background:#fc0; color:#222; margin-left:500px;} 50% {width:200px; height:75px; background:#0bf; color:#fff;margin-top:300px;}
75% {width:75px; height:200px; background:#ccc; color:#111; border-radius:50px; margin-left:0px;} 100% {width:200px; height:75px; background:#370; color:#ff0;} /*kembali ke posisi awal = 0%*/ }
/*buat browser jadulss*/ @-moz-keyframes wow{ 0% {width:200px; height:75px; background:#370; color:#ff0;} 25% {width:75px; height:200px; background:#fc0; color:#222; margin-left:500px;} 50% {width:200px; height:75px; background:#0bf; color:#fff;margin-top:300px;} 75% {width:75px; height:200px; background:#ccc; color:#111; border-radius:50px; margin-left:0px;} 100% {width:200px; height:75px; background:#370; color:#ff0;} /*kembali ke posisi awal = 0%*/ } @-o-keyframes wow{ 0% {width:200px; height:75px; background:#370; color:#ff0;} 25% {width:75px; height:200px; background:#fc0; color:#222; margin-left:500px;} 50% {width:200px; height:75px; background:#0bf; color:#fff;margin-top:300px;} 75% {width:75px; height:200px; background:#ccc; color:#111; border-radius:50px; margin-left:0px;} 100% {width:200px; height:75px; background:#370; color:#ff0;} /*kembali ke posisi awal = 0%*/ } @-webkit-keyframes wow{ 0% {width:200px; height:75px; background:#370; color:#ff0;} 25% {width:75px; height:200px; background:#fc0; color:#222; margin-left:500px;} 50% {width:200px; height:75px; background:#0bf; color:#fff;margin-top:300px;} 75% {width:75px; height:200px; background:#ccc; color:#111; border-radius:50px; margin-left:0px;} 100% {width:200px; height:75px; background:#370; color:#ff0;} /*kembali ke posisi awal = 0%*/ } @-ms-keyframes wow{ 0% {width:200px; height:75px; background:#370; color:#ff0;} 25% {width:75px; height:200px; background:#fc0; color:#222; margin-left:500px;} 50% {width:200px; height:75px; background:#0bf; color:#fff; border-radius:50px;} 75% {width:75px; height:200px; background:#ccc; color:#111;margin-top:300px; margin-left:0px;} 100% {width:200px; height:75px; background:#370; color:#ff0;} /*kembali ke posisi awal = 0%*/
} Seperti yang kita lihat (Yang perlu diperhatikan di @keyframes ini cuma yang paling atasnya aja.. soalnya yang isi prefix dibawah-bawahnya itu cuma copas.. :D), isi frame di masing-masing titik sengaja saya acak-acak supaya perbedaannya terlihat jelas. kecuali, di titik 0% dan 100%nya sengaja saya samakan. hal ini bertujuan supaya jalannya animasi tetap halus biarpun diulang berkali-kali. Setelah membuat @keyframesnya, sekarang kita baru tinggal memanggil @keyframes tersebut dengan perintah animation. Pastikan nama animasi di @keyframes dengan yang dipanggil di animationnya sama ya.. .animasi{ /*CSS yang tadi*/ ... animation:wow 3s infinite; /*durasi disesuaikan*/ -moz-animation:wow 3s infinite; -o-animation:wow 3s infinite; -webkit-animation:wow 3s infinite; -ms-animation:wow 3s infinite; }
Kalau ketikan kita benar tanpa kekurangan titik koma ato typo,, Hasilnya nanti seperti ini :D
Nah, demikianlah tutorial membuat animasi dinamis dengan CSS3. Inti dari semuanya ini adalah dicoba-coba.. Dengan banyak nyoba-nyoba, kita bisa menemukan banyak hal yang nggak kepikiran. Semoga artikel ini bermanfaat untuk kita semua.. :)
Tentang Penulis Christian Rosandhy
