Membuat Gambar Bergetar Dengan Animasi CSS3

00.52 Gusti Ardias Riantono 0 Comments

Membuat Gambar Bergetar Dengan Animasi CSS3 - Selamat tengah malam sobat, saya jamin tidak ada pengunjung jam segini. Saya lagi iseng mempercantik blog malam ini, saya dapat cara menggetarkan gambar menggunakan css3. Mau tau seperti apa? yuk simak lebih lanjut.

Membuat Gambar Bergetar Dengan Animasi CSS3

Seperti apa sih contoh dari gambar yang bergetar itu? lihat demo gambar dibawah ini

Arahkan mouse kesini

Nah seperti itu kira-kira goyangan maut dari css3 haha. Mau diterapkan di blog sobat? bisa kok pasang script dibawah ini tepat dibawah <style> atau diatas </style>

img.digoyang:hover {
animation-name: digoyang;
-moz-animation-name:  digoyang ;
-webkit-animation-name:  digoyang;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes  digoyang  {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes  digoyang  {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes  digoyang  {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

Dan untuk membuat berggetar hanya disisipkan kode class='digoyangkan' saja pada kode img, lihat kode dibawah ini jika kalian masih bingung

Nah mudah bukan, saya sudah terapkan pada header blog saya. Lucu juga bisa bergetar hehe. Silahkan kalian coba sobat jika kalian suka dengan artikel ini. Bye~

#Sumber dari Kang Rian dengan sedikit perubahan kata-kata.