Make Effect Vibrates on Image

Trik vibrate atau getar-getar pada gambar layaknya tarian vibrator barangkali saingan dari tarian gangnam harlem shake :p Hasil akhir yakni, ketika kita melakukan hover pada image, maka image tersebut akan bergetar-getar ke kiri dan ke kanan. Posisi awal sih diam saja itu si gambar, tapi kala cursor mendekat akan terjadi shake it yeah yeah. oooohhh :))
Lagi-lagi trick ini berhasil dibuat karena kedahsyatan varibael CSS versi III.

Demo Vibrating Effect

Demo ini hanya berjalan pada browsingan mozilla, karena Koben hanya memasukan kode CSS support ke firefox :d Tapi tenang saja, untuk ramuan akan dikasih semua kodenya yang mendukung di browsingan utama :)

.iconsV a {
    width: 40px;
    float: left;
}
.iconsV a:hover img {
    cursor: pointer;
    animation: vibrate 0.1s linear 0s infinite;
    -moz-animation: vibrate 0.1s linear 0s infinite;
    -webkit-animation: vibrate 0.1s linear 0s infinite;
    -o-animation: vibrate 0.1s linear 0s infinite;
}
@keyframes vibrate {
0%   {margin-left: 0px;}
25%  {margin-left: -3px;}
50%  {margin-left: 0px;}
75%  {margin-left: 3px;}
100% {margin-left: 0px;}
}
@-moz-keyframes vibrate {
0%   {margin-left: 0px;}
25%  {margin-left: -3px;}
50%  {margin-left: 0px;}
75%  {margin-left: 3px;}
100% {margin-left: 0px;}
}
@-webkit-keyframes vibrate {
0%   {margin-left: 0px;}
25%  {margin-left: -3px;}
50%  {margin-left: 0px;}
75%  {margin-left: 3px;}
100% {margin-left: 0px;}
}
@-o-keyframes vibrate {
0%   {margin-left: 0px;}
25%  {margin-left: -3px;}
50%  {margin-left: 0px;}
75%  {margin-left: 3px;}
100% {margin-left: 0px;}
}

Markup HTML

<div class="iconsV">
<a href="LINK 1" title=""><img src="LINK IMAGE 1" alt="" /></a>
<a href="LINK 2" title=""><img src="LINK IMAGE 2" alt="" /></a>
<a href="LINK 3" title=""><img src="LINK IMAGE 3" alt="" /></a>
<a href="LINK 4" title=""><img src="LINK IMAGE 4" alt="" /></a>
</div>Kunjungi blog sumber berikut, acak-acak artikel yang ada di sana, khususon postingan mengenai CSS 3 ;) Please visit Techumber Blog
Happy blogging \m/