CSS adalah bahasa pemrograman web yang saya suka nomor dua, setelah Javascript yang ditempati di nomor satu. Salah satu hal yang dapat anda lakukan dengan CSS adalah membuat animasi dengan keyframes.
Nah kali ini saya membuat efek animasi guncangan dengan CSS Animation Keyframes, untuk demo nya silakan lihat disini:
Keren? Jelas...
Bagi anda yang ingin membuatnya juga, silakan ikuti panduan berikut ini.
Perhatian : Anda harus mengerti setidaknya dasar dari HTML dan CSS untuk dapat memasang animasi ini, agar tidak terjadi error dan rusak.
Pertama, silakan anda cari terlebih dahulu elemen HTML yang ingin dibuat berguncang. Setelah itu, tambahkan CLASS
guncangjarwo ke dalamnya, sehingga kurang lebih bentuknya menjadi seperti ini (hanya contoh):<div class='guncangjarwo' /> atau <div class='abcabc guncangjarwo' />
Lalu, silakan anda masuk ke Edit HTML, masukkan kode berikut tepat diatas
</head> atau <head/>.<style>
.guncangjarwo {animation-name:guncangjarwo;animation-duration:.8s;transform-origin:50% 50%;animation-iteration-count:infinite;animation-timing-function:linear}
@keyframes guncangjarwo{
0%{transform:translate(4px,2px) rotate(0)}
10%{transform:translate(-2px,-4px) rotate(-1deg)}
20%{transform:translate(-6px,0) rotate(1deg)}
30%{transform:translate(0,4px) rotate(0)}
40%{transform:translate(2px,-2px) rotate(1deg)}
50%{transform:translate(-2px,4px) rotate(-1deg)}
60%{transform:translate(-6px,2px) rotate(0)}
70%{transform:translate(4px,2px) rotate(-1deg)}
80%{transform:translate(-2px,-2px) rotate(1deg)}
90%{transform:translate(4px,4px) rotate(0)}
100%{transform:translate(2px,-4px) rotate(-1deg)}
}
</style>
Simpan template dan lihat hasilnya. Sekarang, saya bisa pastikan elemen tadi berguncang. Bagi anda yang ingin membuat elemen hanya berguncang ketika diarahkan mouse/hover, anda dapat menambahkan pseudo pada .guncangjarwo, sehingga kurang lebih menjadi seperti ini:
.guncangjarwo:hover { ... }
Simpan dan coba arahkan mouse.
Sebenarnya, ada banyak sekali animasi-animasi keren yang dapat anda dan saya buat dengan CSS, tetapi terkadang kita malas saja...