how 2 do a shake effect/buzz effect when you hover!

HAAIII back again with another blog about meh mediocre coding skillz 0_o lulz anyway, haven't seen much about this sort of code so i'll be teh one 2 post it!!!! i figured it out mostly by mehself lulz

ANIMATION KEYFRAME JAZZ:

----code start, put <style> here

  50% {

    -webkit-transform: translateX(3px) rotate(2deg);

    transform: translateX(3px) rotate(2deg);

  }

  100% {

    -webkit-transform: translateX(-3px) rotate(-2deg);

    transform: translateX(-3px) rotate(-2deg);

  }

}

@keyframes buzz-on-hover {

  50% {

    -webkit-transform: translateX(3px) rotate(2deg);

    transform: translateX(3px) rotate(2deg);

  }

  100% {

    -webkit-transform: translateX(-3px) rotate(-2deg);

    transform: translateX(-3px) rotate(-2deg);

  }

}

.buzz-on-hover {

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: perspective(1px) translateZ(0);

  transform: perspective(1px) translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}

.buzz-on-hover:hover, .buzz-on-hover:focus, .buzz-on-hover:active {

  -webkit-animation-name: buzz-on-hover;

  animation-name: buzz-on-hover;

  -webkit-animation-duration: 0.15s;

  animation-duration: 0.15s;

  -webkit-animation-timing-function: linear;

  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

}

----- code end, put </style> here

now teh other essential thing 2 do is put where u want teh code to work on, it wont default to everything by you putting teh animation code alone (liek i thought originally and i wuz fuming for liek 3 hours before i realized.... hehe...) so you have to do a little sumthin liek thiz!

----code start, put <style> here

.profile-pic:hover{

    animation-name: buzz-on-hover;

    animation-duration: 0.15s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

    margin-left: 0px;

    margin-top: 0px;

}    

-----code end, put </style> here

the code example above will make ur pfp buzz on hover! you can add other thingz to it, liek if u want the blog thingy to buzz on hover too, put .blog-preview next to it and keep adding liek that, dont forget to seperate with comas tho, liek ".profile, .blog-preview, .yadayadayada, .you-get-wut-im-sayin" 

VERY importaint note, for it to work when u hover, make sure to put ":hover" at the end, becuz if u dont, the animation will work, but it will play even when ur not hovering on it, so to make it only play when u hover, put ":hover" liek shown above! 

example of what it should be doing:

example of what it SHOULDN'T be doing:

of course if you do want it to be like the second gif there isnt anything wrong with that, have fun with it ^^ but thiz iz a tutorial on how to make it do the animation on hover only so i have to include the right version lulz

hope thiz helpz!!!!