Edit in JSFiddle

<div class="socialw fadeInDown">  
  
<!-- Dribbble !-->
<a href="http://dribbble.com" target="_blank">        
<div class="social first"> <img src="http://i.imgur.com/64r2jAv.png"/></div>
</a>
<!-- Dribbble !-->

<!-- Behance !-->
<a href="http://behance.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/fkuhUov.png"/></div>
</a>
<!-- Behance !-->

<!-- Facebook !-->
<a href="http://facebook.com" target="_blank">        
<div class="social"><img src="http://i.imgur.com/PY2EPRW.png"/></div>
</a>
<!-- Facebook !-->

<!-- Twitter !-->
<a href="http://twitter.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/ny0pyqt.png"/> </div>
</a>
<!-- Twitter !-->

<!-- Intagram !-->
<a href="http://instagram.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/tZZG2zQ.png"/></div>
</a>
<!-- Instagram !-->

</div>
<!-- Social Icons End !-->

.socialw {
    width: 235px;
    margin: 100px auto 0 auto;
    overflow: auto;
    height: 100%;
}
.social{
  position:relative;
    border: 1px solid #292929;
    width: 37px;
    height: 62px;
    float: left;
    margin-left: 10px;
    overflow: hidden;
}
.first {
    margin-left: 0px;
}

/*    ANIMATIONS   */

/* Fade In Down */
@-webkit-keyframes fadeInDown {
0% {  opacity: 0;  -webkit-transform: translateY(-100px);  }    
100% {  opacity: 1;  -webkit-transform: translateY(0);    }
}

@-moz-keyframes fadeInDown {
0% {  opacity: 0;  -moz-transform: translateY(-100px);    }    
100% {  opacity: 1;  -moz-transform: translateY(0);  }
}

@-o-keyframes fadeInDown {
0% {  opacity: 0;  -o-transform: translateY(-100px);    }    
100% {  opacity: 1;  -o-transform: translateY(0);  }
}

@keyframes fadeInDown {
0% {  opacity: 0;  transform: translateY(-100px);    }    
100% {  opacity: 1;  transform: translateY(0);    }
}

.fadeInDown {
-webkit-animation: fadeInDown 1s both 0.5s;
-moz-animation: fadeInDown 1s both 0.5s;
-o-animation: fadeInDown 1s both 0.5s;
animation: fadeInDown 1s both 0.5s;
}
/* Fade In Down */

/* Social Transition */

.social img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top 250ms ease-in;
-moz-transition: margin-top 250ms ease-in;
-o-transition:  margin-top 250ms ease-in;
transition:  margin-top 250ms ease-in;
}
.social:hover img{
margin-top:-62px;
}