CSS Shaking On Hover

About This Script

To use this, simply copy the CSS from below to the <head> tag of your page. Then add the "shake" class to any image you want this to apply to.

Demo

Hover over something to see the effect.

Hover over me Hover over me Hover over me Hover over me

Code

<style type="text/css">
/**
 * Shaking effect provided by http://www.top-site-list.com
 */
@-webkit-keyframes shake {
	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); }
}
@keyframes shake {
	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); }
}
.shake:hover,
.shake:focus {
	animation-name: shake;
	animation-duration: 0.8s;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-name: shake;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
</style>

<!-- Examples. You don't need to copy this part. -->
<a class="btn shake">Hover over me</a>
<a class="btn btn-success shake">Hover over me</a>
<a class="btn btn-danger shake">Hover over me</a>
<a class="btn btn-primary shake">Hover over me</a>
<br/><br/>
<img class="shake" src="http://www.top-site-list.com/scripts/assets/grayscale-images/dog.jpg" style="width:320px;" />

More scripts

Boxing Away Intro Bubbles Flying Planes Lottery Number Picker Comet Cursor Trail Display Time

Submit Your Own Scripts

Use CSS3 animation to makes any element(s) shake when you hover over them.

About This Script

Demo

Code

You Might Also Like

Sign Up to Top Site List Planet Now!

Login with one of these social networks...

or create an account with your email...