Membuat animasi dengan aplikasi tertentu memang sudah umum. Tapi pernahkah Anda membuat animasi menggunakan style CSS?
Artikel ini memuat cara membuat animasi PacMan menggunakan sedikit kode HTML dan style CSS3 serta aplikasi Notepad. Cara pembuatannya hanya membutuhkan tiga langkah yang mudah untuk dipraktekkan. Berikut tiga langkah mudah tersebut:
- Membuat kode HTML
Hal pertama yang diperlukan untuk membuat animasi ini adalah sebuah tautan (link) untuk memanggil file CSS dan dua elemen div dalam sebuah file HTML. Elemen div yang pertama akan digunakan untuk membuat wajah Pac-Man, sedangkan elemen div yang kedua untuk memberi mata.
Buka Notepad, lalu copy-paste kode berikut:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="pacman"> <div id="mata"></div> </div> </body> </html>
Perhatikan bahwa elemen div yang pertama dinamaipacman
, sedangkan elemen div yang kedua dinamaimata
. Div#pacman
akan digunakan untuk membuat wajah Pac-Man, sedangkan div#mata
untuk menambahkan mata pada Pac-Man yang kita buat. Simpan file dan beri namapacman.html
Pastikan Anda memilih All Files (*) pada pilihan Save as type di Notepad. Jika tidak, file yang Anda buat akan menjadi file Text (.txt), bukan HTML.
- Desain obyek dengan CSS
Setelah membuat file HTML, kini kita akan membuat file stylesheet CSS untuk membuat obyek wajah dan mata Pac-Man. Buka dokumen Notepad baru, lalu simpan dengan nama
style.css
. Sekali lagi, pastikan Anda memilih All Files (*) pada pilihan Save as type ketika menyimpan di Notepad (lihat gambar diatas).
- Membuat wajah Pac-Man dimulai dari mengatur ukuran pada div
#pacman
dengan lebar 0 piksel dan tinggi 0 piksel. Ini digunakan untuk menghilangkan bentuk yang akan dibuat. Selanjutnya, tambahkan garis tepi (border) setebal 80 piksel dengan pengaturan warna sebagai berikut: garis tepi atas: orange; garis tepi kanan: transparent (tidak terlihat); garis tepi bawah: orange; garis tepi kiri: orange. Tulis blok style CSS berikut pada filestyle.css
:
div#pacman { border-color: orange transparent orange orange; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-style: solid; border-width: 80px; height: 0; position: relative; width: 0; }
- Membuat mata Pac-Man
Pada bagian ini hanya diperlukan sebuah elemen div yang lebar dan tingginya 15 piksel dengan warna oranye gelap (kode RGB:#B35900
). Elemen div tersebut akan tampak seperti lingkaran didalam div wajah Pac-Man (#pacman
). Tambahkan blok style CSS berikut pada filestyle.css
, dibawah blok stylediv#pacman
:
div#mata { background: #B35900; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; bottom: 60px; height: 15px; position: relative; width: 15px; z-index: 100; }
Penggunaanz-index
disini dimaksudkan untuk menampakkan posisi lebih awal daripada div sebelumnya.
- Membuat wajah Pac-Man dimulai dari mengatur ukuran pada div
- Tambahkan style CSS3 untuk menjalankan Pac-ManKita akan menggunakan properti
animation
dan rule@keyframes
untuk menambahkan animasi pada obyek Pac-Man yang kita buat.- Properti
animation
berfungsi untuk menambahkan animasi pada Pac-Man. Pada pembuatan animasi Pac-Man yang kita buat, propertianimation
ditulis didalam blok style div wajah Pac-Man, yaknidiv#pacman
:div#pacman { border-color: orange transparent orange orange; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-style: solid; border-width: 80px; height: 0; position: relative; width: 0; animation: animasi-pacman 6s infinite; -moz-animation: animasi-pacman 6s infinite; -webkit-animation: animasi-pacman 6s infinite; -o-animation: animasi-pacman 6s infinite; }
Perhatikan baris ke-13 hingga baris ke-16, dimana propertianimation
ditambahkan dalam blokdiv#pacman
. - Rule
@keyframes
digunakan untuk mengatur bagaimana Pac-Man akan dijalankan. Tanpa@keyframes
, Pac-Man yang kita buat hanya akan berdiam diri di pojok kiri halaman. Penulisan@keyframes
harus diikuti dengan nama animasi (disini kita akan menggunakan namaanimasi-pacman
). Jika Anda masih awam mengenai@keyframes
, ada baiknya Anda membaca CSS3 @keyframes rule terlebih dahulu. Tambahkan blok style CSS3 berikut pada filestyle.css
, dibawah blok stylediv#mata
:
@keyframes animasi-pacman { 0% { top: 20px; left: 50px; border-color: orange transparent orange orange; } 5% { top: 20px; left: 50px; border-color: orange transparent orange orange; } 10% { top: 20px; left: 100px; border-color: orange; } 15% { top: 20px; left: 150px; border-color: orange transparent orange orange; } 20% { top: 20px; left: 200px; border-color: orange; } 25% { top: 20px; left: 250px; border-color: orange transparent orange orange; } 30% { top: 20px; left: 300px; transform: rotate(0deg); border-color: orange; } 40% { top: 70px; left: 300px; transform: rotate(90deg); border-color: orange transparent orange orange; } 45% { top: 120px; left: 300px; border-color: orange; } 50% { top: 170px; left: 300px; border-color: orange transparent orange orange; } 55% { top: 220px; left: 300px; transform: rotate(90deg); border-color: orange; } 65% { top: 220px; left: 350px; transform: rotate(0deg); border-color: orange transparent orange orange; } 70% { top: 220px; left: 400px; border-color: orange; } 75% { top: 220px; left: 450px; border-color: orange transparent orange orange; } 80% { top: 220px; left: 500px; border-color: orange; } 85% { top: 220px; left: 550px; border-color: orange transparent orange orange; } 90% { top: 220px; left: 600px; border-color: orange; } 95% { top: 220px; left: 650px; border-color: orange transparent orange orange; } 100% { top: 220px; left: 700px; transform: rotate(0deg); border-color: orange; } }
Blok CSS3 diatas digunakan untuk menjalankan Pac-Man dari sisi kiri atas kearah tengah atas, kemudian berputar sekaligus turun. Setelah turun, Pac-Man akan bergerak ke arah kanan.
- Properti
Simpan file dalam folder yang sama, kemudian buka pacman.html
di browser untuk melihat hasilnya.