Amazing Social Icons Vibrating Effect Using Pure CSS3

Hi guys after so many days i came back with css3 related articular. I started converting jquery plugins into css3 plug-ins. You can see my previous css3-plugins here. In to days post I will explain how to create vibrating Effect on Social media icons using Pure CSS3. It is very simple code. I used CSS3 animation and keyframes to create this effect. Let’s jump in the code.
Amazing Social Icons Vibrating Effect Using Pure CSS3


demo
download

HTML

<div class="icons"> 
<div> 
<img src="img/blogger.png" /> 
</div> 
<div> 
<img src="img/facebook.png" /> 
</div> 
<div> 
<img src="img/google.png" /> 
</div> 
<div> 
<img src="img/linkedin.png" /> 
</div> 
</div> 

Here in side img folder we have all our social icons. You can download social icons with the code.
CSS

.icons div{ 
width: 40px; 
float: left; 
} 
.icons div:hover img{ 
margin-left: 0px; 
cursor: pointer; 
animation:vibrate 0.1s linear 0s infinite ; 
} 

@keyframes vibrate 
{ 
0% {margin-left: 0px;} 
25% {margin-left: -3px;} 
50% {margin-left: 0px;} 
75% {margin-left: 3px;} 
100% {margin-left: 0px;} 
} 

This is the minimal code for vibrating icons.
Complete code with browser prefix

.icons div{ 
width: 40px; 
float: left; 
} 
.icons div:hover img{ 
margin-left: 0px; 
cursor: pointer; 
animation:vibrate 0.1s linear 0s infinite ; 
-moz-animation: vibrate 0.1s linear 0s infinite ; /* Firefox */ 
-webkit-animation: vibrate 0.1s linear 0s infinite ; /* Safari and Chrome */ 
-o-animation: vibrate 0.1s linear 0s infinite ; /* Opera */ 
} 

@keyframes vibrate 
{ 
0% {margin-left: 0px;} 
25% {margin-left: -3px;} 
50% {margin-left: 0px;} 
75% {margin-left: 3px;} 
100% {margin-left: 0px;} 
} 

@-moz-keyframes vibrate /* Firefox */ 
{ 
0% {margin-left: 0px;} 
25% {margin-left: -3px;} 
50% {margin-left: 0px;} 
75% {margin-left: 3px;} 
100% {margin-left: 0px;} 
} 

@-webkit-keyframes vibrate /* Safari and Chrome */ 
{ 
0% {margin-left: 0px;} 
25% {margin-left: -3px;} 
50% {margin-left: 0px;} 
75% {margin-left: 3px;} 
100% {margin-left: 0px;} 
} 

@-o-keyframes vibrate /* Opera */ 
{ 
0% {margin-left: 0px;} 
25% {margin-left: -3px;} 
50% {margin-left: 0px;} 
75% {margin-left: 3px;} 
100% {margin-left: 0px;} 
} 

This code only work in css3 support browser. Please vist http://caniuse.com/css-animation for more details. That’s it hope you like it.s