<div class="wrap">
  <div class="social">
    <i class="icon-facebook fb"></i>
    <i class="icon-twitter tw"></i>
    <i class="icon-youtube yt"></i>
    <i class="icon-dribble dr"></i>
    <i class="icon-skype sk"></i>
     <i class="icon-dropbox db"></i>
     <i class="icon-apple apple"></i>
  </div>
</div>

@-webkit-keyframes wiggle {
    0% {transform: rotateZ(2deg);}
    50% {transform: rotateZ(-2deg);}
    100% {transform: rotateZ(2deg);}
}

@mixin iconTransition{

        transition: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}

@mixin wiggler{
   animation-name: wiggle;
   animation-duration: .4s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
}



*, *::before, *::after{
  box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -o-box-sizing: border-box;  
} 

body {

}

.wrap {
  width: 35%;
  margin: 100px auto;
  text-align: center;
}

.social{
  font-size: 2.5em;
  height: 50px;
  overflow:hidden;
  border-bottom: 1px solid #abc;
}

i{
  position: relative;
  top: 30px;
  margin: 0 10px;
  @include iconTransition;

  &:hover{
     top: 5px;
    
    }
}

.fb{
  color: #3B5998;
}

.tw{
 color: #09AEEC;
}

.yt{
  color: #AA2A25;
}

.dr{
  color: #ea4c89;
}

.sk{
  color: #00A5E6;
}

.db{
  color: #000;
}

.apple{
  color: #ccc;
}