Amazing Social Icons Vibrating Effect Using Pure CSS3

Published on March 9, 2013

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.

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