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

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.