Shake Effect CSS3

shake me

Shake Effects with CSS3 Possible?

Shake HTML elements in your web pages? Is it possible with CSS3? Have you ever tried of shaking elements with CSS? Or do we need to add some javascript or jquery plugins for the shaking effect of elements in web pages?

Let see how we can add shake effect for elements in your web pages. Before we go ahead with adding shake effect, we should talk about CSS3 animations. For understanding CSS3 animations, please refer the article Principles of CSS3 Animation which I have posted earlier.

Hope, you have got some ideas about the CSS3 animations and the principles from the previous article. Now let us go forward and see how to shake everything. So, here we will have to use the CSS3 properties like keyframe and transform, in order to achieve the shake effect for any elements in a web page. Let me explain how to do this.

Shake Effect Demo

HTML for the Shake Effect

First of all, we will start with adding the html for shake effect. Here we add an achor tag for our purpose.

 
    <a href="#" class="shakeme">Shake Me!!</a>

We have added an anchor tag and added a class “shakeme”. Now, let us see the css needed for the effect.

CSS for the Shake Effect

@-webkit-keyframes shakeme {
        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); }
}
.shakeme:hover,
.shakeme:focus {
	-webkit-animation-name: shakeme;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
.shakeme {
	display:inline-block
}

Shake Effect CSS explained

Keyframe property is used for adding different events for the time frame. The transform property applies a 2D transformation to the element with the class “shakeme”. Translate defines 2D translations with ‘x’ and ‘y’ axis values. And ‘rotate’ property with degree of values. We are calling the animation “shakeme” on ‘hover’ and focus of the element in the html page.

* ‘animation-name’ specifies the name of the keyframe we want to bind to the selector.
* ‘animation-duration’ specifies how many seconds or milliseconds an animation takes to complete.
* ‘transform-origin’ property allows us to change the position on transformed elements.
* ‘animation-iteration-count’ specifies how many times an animation should be played.
* ‘animation-timing-function’ specifies the speed curve of the animation.

The first two of the above are self explanatory. Let me explain other things.
The ‘transform-origin’ property defines the origin position of these animations. So, with the values “50% 50%” we are setting the position as ‘center’. If we change the values of the transform-origin property, we can achieve different effects for the elements. The ‘animation-iteration-count’ is infinite and the animation will go on as long as the element is hovered or focused. ‘animation-timing-function‘ which is linear will set the speed of the animation same from start to end.

Keep in mind when you create shake effect

There are few things which you should keep in mind, when you create shake effect for any elements. We can add the effect to any elements. Here, have added shake effect for a link (anchor tag). But you might have noticed, I have added ‘display: inline-block’ property for the anchor tag. So, make sure that the element for which you are adding the shake effect should be either ‘inline-block’ or ‘block’. In other words, it must have a specific width or they must be a floated element.

I have used ‘-webkit’ prefix for the CSS properties (Must for webkit browsers). So this will work in webkit browsers. In order to make this work on Firefox, we have to add the properties without the prefix.

Demo for shake effect

Find the demo for shake effects for different elements
Shake Effect Demo

What next?

Now, it is your turn. Try it yourself and shake your web pages! Good Luck!!

Leave a Reply

Your email address will not be published. Required fields are marked *