我使用的是背景图像上CSS3变换放大悬停。
我曾在Opera，Safari和Firefox的最新的浏览器测试，工作不错，流畅，但是在Chrome中的过渡是非常生涩。
继承人是链接，社会图标悬停，看看我的意思.. http://www.media-flare.com/pins/ -当你调整浏览器到移动视图，它会变得更糟我已经注意到了。
我在这里做一个的jsfiddle版本，并减缓了过渡，因为它是很难看到的。
http://jsfiddle.net/wsgfz/1/ -这似乎在生涩Chrome和Firefox，在光滑的Safari和Opera。
有什么我可以做，使过渡更平滑？
下面是代码，如果你无法查看的jsfiddle
.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); }
<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>
转换似乎比在Chrome中过渡到更好的工作。 试试这个：
.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-transform: translate(0px, 0); -webkit-transition: -webkit-transform 0.8s ease; -moz-transform: translate(0px, 0); -moz-transition: -moz-transform 0.8s ease; transform: translate(0px, 0); transition: -webkit-transform 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); }
<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>
闪烁效果一个快速的鼠标输入/输出应该现在也没有了。
2017年更新
为了响应@马特考夫林的帖子，浏览器在本地支持动画， 渲染，现在CSS和JS动画在自己的线程 ....
基于CSS的动画和Web动画，其中原生支持，在被称为一个线程通常处理“合成线”。 这是从浏览器的“主线”，在造型，设计，绘画，和JavaScript执行的不同。 这意味着，如果运行浏览器的主线程上的一些昂贵的任务，这些动画可以继续使用，无需中断去。
https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance
该开发者文档还支持@ user1467267目前接受的答案...
在这里你可以，你应该避免动画触发布局或涂料性能。 对于大多数现代浏览器，这意味着限制性的动画，以不透明性或变换 ，这两种的浏览器可以高度优化; 如果动画是由JavaScript或CSS处理也不要紧。
该文件还表明，实施使用的will-change ，而您将动画，使浏览器可以为这些属性进行额外的优化的财产一样。 在我个人的经验，这只是似乎是明显的镀铬的不透明度和变换。
element{
will-change: transform, opacity;
}
基础问题
当动画运行速度很慢，看起来不均匀，它只是暴露是永远存在的浏览器的限制。
浏览器并没有呈现动画专用线程。 动画有类似的UI事件浏览器的其他活动竞争。 而且有时浏览器也与在计算机上运行的其他软件的竞争。 加上提供给浏览器硬件加速可能是比较有限的。
动画与缓和运行甚至在动画，这使得动画的自然不均匀甚至更明显的开始和/或结束慢。
解决方案
以防止不均匀从如此明显的最简单的解决方案是增加动画的速度，和任选地除去或减少使用缓和。 它可能会使用一种类型的宽松是不会减慢相当的开头和结尾一样多。
展望未来，另一种选择是使用的WebGL的硬件加速（HTML5 canvas标签与3D上下文），应减少的问题。 随着硬件加速变得越来越普遍，更好的支持在浏览器和设备，它应该开始是可行的，使作为平稳运行较旧的Flash动画复杂的动画。
