Techumber

Amazing Social Icons Vibrating Effect Using Pure CSS3

Github avatar
Dimpu
March 09, 2013. 2 min read

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 //caniuse.com/css-animation for more details. That’s it hope you like it.s


...