Social media slide on hover using css only

by aljon254

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<ul>
    <li>
        <a href="#">
		    <i class="fa fa-facebook socialAnimate1"></i>     
		    <i class="fa fa-facebook socialAnimate2"></i> 
	    </a>
    </li>
    <li>
        <a href="#">
		    <i class="fa fa-twitter socialAnimate1"></i>
		    <i class="fa fa-twitter socialAnimate2"></i>								
	    </a>
    </li>
	<li>								
        <a href="#">								
            <i class="fa fa-pinterest socialAnimate1"></i>
            <i class="fa fa-pinterest socialAnimate2"></i>								
        </a>
	</li>
	<li>
        <a href="#">
	    	<i class="fa fa-google socialAnimate1"></i>
		    <i class="fa fa-google socialAnimate2"></i>
		</a>								
	</li>
</ul>

CSS

html{
    background-color:#aaaaaa;    
}
ul{
    color: #C2C4C8;
    margin:0px;
    padding:0px;
    width:100%;
}

ul li{
    float:left;
    list-style:none;
    display:block;
    border-right:1px solid #3A434F;
    width:50px;
    height:50px;
    display:block;
    overflow:hidden;
    background-color:#272D36;
}

ul li:first-child{
    border-left:1px solid #3A434F;
}

ul li a{
    width:50px;
    height:50px;
    display:block;
    transition: all 		300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 	300ms ease-in-out; /** Firefox **/
    -o-transition: all 		300ms ease-in-out; /** Opera **/
    text-decoration:none;    
}

i.socialAnimate1{
    font-size:20px;
    color:#606E82;
    width:50px;
    height:50px;
    line-height:50px;
    display:block;
    text-align:center;
}

i.socialAnimate2{
    font-size:20px;
    width:50px;
    height:50px;
    line-height:50px;
    display:block;
    text-align:center;
    color:#ffffff;
}

ul li a:hover {
    -ms-transform: translateY(-50px); /* IE 9 */
    -webkit-transform: translateY(-50px); /* Chrome, Safari, Opera */
    transform: translateY(-50px); /* Standard syntax */
}

ul li a:hover .fa-facebook{
	color:#0D67BC;
}
ul li a:hover .fa-twitter{
	color:#16D2FC;
}
ul li a:hover .fa-google{
	color:#EA7704;
}
ul li a:hover .fa-pinterest{
	color:#EA0909;
}