Jiggle effect using CSS

Have you ever wondered how does the icons in your iPhone jiggle?
If yes here you can find out how. There have been many tricks to let it happen but the most easy one is using CSS,
ya you got me correct pure CSS. Below code snippet helps you display some awesome css effects.

Demo on jsfiddle

Click on the icon to start/stop jiggling !!!

Sometimes you might want your icon to start or stop jiggling on an event.
General case might be on clicking it, or on hovering or onload or many more...
So below script helps you to add/remove jiggle class on click event which would solve out your issue.
In case you want it on some other event just change the event type and you all set to go.

Script

1. $(function() {
2.   $('.click-to-jiggle').click(function(e) {
3.    $(this).toggleClass('jiggle');
4.    return false;
5.   });
6. });

So for jiggling you might need some icon images right.
This icons would be got using img tag and we will toggle a class for each img tag to jiggle it.

HTML

1. <img class="click-to-jiggle jiggle" src="blogger.png">
2. <img class="click-to-jiggle jiggle" src="facebook.png">
3. <img class="click-to-jiggle jiggle" src="linkedin.png">
4. <img class="click-to-jiggle jiggle" src="youtube.png">
5. <img class="click-to-jiggle jiggle" src="twitter.png">

Here comes the most crucial part... The CSS, so there are some css styles attributes which are supported by some browser
and which might help you complete you task easily without much stress. Let's see

CSS

1. .jiggle {
2.   -webkit-animation: jiggle 0.2s infinite;
3.   -moz-animation-duration: 0.2s;
4.   -moz-animation-name: jiggle;
5.   -moz-animation-iteration-count: infinite;
6.   -webkit-transform: rotate(-3deg);
7.   -moz-transform: rotate(-3deg);
8. }
9. @-moz-keyframes jiggle {
10.   0% {
11.   -moz-transform: rotate(-1deg);
12.   }
13.   50% {
14.   -moz-transform: rotate(1deg);
15.   }
16.  }
17.  
18. @-webkit-keyframes jiggle {
19.   0% {
20.   -webkit-transform: rotate(-1deg);
21.   }
22.   50% {
23.   -webkit-transform: rotate(1deg);
24.   }
25. }