Cara Membuat Animation Shake Pada Gambar

Animation atau animasi pasti sudah sobat kenal sendiri yah lewat berbagai macam animasi css dari Search ataupun Popup fanspage facebook yang pernah sobat pasang di blognya. Tapi sekarang saya hanya akan membuat Animation Shake saja atau animasi getar, animasi ini akan bekerja saat mouse mengarah ke gambar saja.

Untuk membuat animasi shake ini cukup mudah ngak ribet amat ngak kayak buat CSS untuk tampilan yang sangat bikin puyeng bin ribet.

Tutorial Animation Shake

1. Masuk ke blog sobat > lalu pilih Edit Tema > Klik Edit HTML

2. Cari kode img usahain ketemu yah

3. Tambahkan kode berikut untuk membuat animation shake tersebut agar jalan

{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px;}
@keyframes shake {10%, 90% {transform: translate3d(-1px, 0, 0);}20%, 80% {transform: translate3d(2px, 0, 0);}30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}40%, 60% {transform: translate3d(4px, 0, 0);}

4. Bila ngak mau ribet copy kode ini dan paste saja di kode <style> dibawahnya

img:hover{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;transform: translate3d(0, 0, 0);backface-visibility: hidden;perspective: 1000px;}
@keyframes shake {10%, 90% {transform: translate3d(-1px, 0, 0);}20%, 80% {transform: translate3d(2px, 0, 0);}30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}40%, 60% {transform: translate3d(4px, 0, 0);}}

5. Simpan Template

6. Selesai

Untuk demo udah lihat gambar diatas pasti bergetar saat sobat mengarahkan kursor mouse ke gambar diatas.

Share this post