CSS3 animations help us to add a lot of effects to our web pages. Animations and effects on the page, makes it more interesting to the user. Effects like fade in, fade out, moving, shrinking, zooming, shake effects, flipping effects etc… are some of the effects we can add in our web pages. So, in this tutorial we will see how to add shake effects to any elements in our web pages.
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.
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
