Простой способ сверстать соц. иконки с анимацией

<div class="soc-cod">
    <a href="#" class="fa">Facebook</a>
    <a href="#" class="vk">В контакте</a>
    <a href="#" class="tv">Twitter</a>
    <a href="#" class="lv">Live Journal</a>
    <a href="#" class="od">Одноклассники</a>
    <a href="#" class="ma">Mail.ru</a>
    <a href="#" class="go">Google</a>
    <a href="#" class="ya">Яндекс</a>
</div>

.soc-cod a {
    width: 25px;
    height: 25px;
    margin: 0 3px;
    float: left;
    display: block;
    overflow: hidden;
    background: url(http://dle-faq.ru/uploads/posts/2013-06/1371892084_icon_sprite_1.png) no-repeat 0 0;
    text-indent: -9999px;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    transition: all linear .3s;
}
.soc-cod .fa        {background-position: 0 0;}
.soc-cod .fa:hover    {background-position: 0 -27px;}
.soc-cod .vk        {background-position: -28px 0;}
.soc-cod .vk:hover    {background-position: -28px -27px;}
.soc-cod .tv        {background-position: -57px 0;}
.soc-cod .tv:hover    {background-position: -57px -27px;}
.soc-cod .lv        {background-position: -85px 0;}
.soc-cod .lv:hover    {background-position: -85px -27px;}
.soc-cod .od        {background-position: -113px 0;}
.soc-cod .od:hover    {background-position: -113px -27px;}
.soc-cod .ma        {background-position: -141px 0;}
.soc-cod .ma:hover    {background-position: -141px -27px;}
.soc-cod .go        {background-position: -168px 0;}
.soc-cod .go:hover    {background-position: -168px -27px;}
.soc-cod .ya        {background-position: -196px 0;}
.soc-cod .ya:hover    {background-position: -196px -27px;}