我已经在Opera,Safari和Firefox的最新浏览器中进行了测试,并且工作流畅,然而在Chrome中,这种转换是非常干的.

他们是链接,悬停在社交图标上,看看我的意思.http://www.media-flare.com/pins/ – 我注意到,当你将浏览器调整到移动视图,它变得更糟.

我在这里做了一个jsfiddle版本,减慢了转换,因为它很难看到.

http://jsfiddle.net/wsgfz/1/ – 这在Chrome和firefox看起来很厉害,游客和歌剧都很流畅.

有什么可以做的,使过渡更顺利吗？

这是代码,如果你不能查看jsfiddle

HTML

<ul class="social">
    <li><a href="" class="fbook">Facebook</a></li>
    <li><a href="" class="twit">Twitter</a></li>
    <li><a href="" class="tmblr">Tumbler</a></li>
    <li><a href="" class="pntrst">Pinterest</a></li>
    <li><a href="" class="insta">Instagram</a></li>
    <li><a href="" class="RSS">RSS</a></li>
</ul>

CSS

.social {
   position: relative;
   list-style:none;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.social > li > a {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
   color: transparent;
}

.fbook,.twit,.tmblr,.pntrst,.insta {
   background: url(http://placehold.it/350x150) center center;
   width: 78px;
   height: 90px;
   background-size: cover;
   float: left;
   margin: 30px;
   -webkit-transition: all 0.8s ease;
   -moz-transition: all 0.8s ease;
   transition: all 0.8s ease;
 }

 .fbook {background-position: 0 0}
 .twit {background-position: -78px 0}
 .tmblr {background-position: -156px 0}
 .pntrst {background-position: -232px 0}
 .insta {background-position: -310px 0}

.fbook:hover,.twit:hover,.tmblr:hover,.pntrst:hover,.insta:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
 }