在Chrome中干CSS转换过渡

Question

我在背景图像上使用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>

Answer 1

2017更新

回应@Matt Coughlin的帖子，原生支持动画的浏览器，现在在自己的线程上渲染CSS和JS动画....

基于css的动画和本地支持的Web动画通常在一个称为"合成线程"的线程上处理。这与浏览器的"主线程"不同，在主线程中执行样式、布局、绘制和JavaScript。这意味着，如果浏览器在主线程上运行一些昂贵的任务，这些动画可以继续运行而不被中断。

https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

此开发人员文档还支持当前接受的来自@user1467267的答案…

在可以的地方，你应该避免动画属性触发布局或绘制。对于大多数现代浏览器，这意味着限制动画不透明或转换，这两个浏览器都可以高度优化;不管动画是由JavaScript还是CSS处理的

该文档还建议实现使用will-change属性的属性，你将动画，以便浏览器可以执行额外的优化这些属性。在我个人的经验中，这似乎只在chrome的不透明度和转换中很明显。

element{
  will-change: transform, opacity;
}

Answer 2

在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>

鼠标快速进出的闪烁效果现在也应该消失了

Answer 3

基本问题

当动画运行缓慢且看起来不均匀时，它只是暴露了浏览器一直存在的限制。

浏览器没有专门的线程来渲染动画。动画必须与其他浏览器活动(如UI事件)竞争。有时浏览器还会与电脑上运行的其他软件竞争。此外，浏览器可用的硬件加速可能有些有限。

带有easing的动画在动画开始和/或结束时运行更慢，这使得动画的自然不均匀性更加明显。

<<p> 解决方案/strong>

防止不均匀如此明显的最简单的解决方案是提高动画的速度，并有选择地删除或减少缓动的使用。也许可以使用一种缓速，在开始和结束时不会减慢那么多。

展望未来，另一个选择是使用WebGL的硬件加速(带有3D上下文的HTML5画布标签)，这应该会减轻这个问题。随着硬件加速在浏览器和设备上变得越来越普遍和更好的支持，制作复杂的动画应该开始变得可行，因为它运行得像旧的Flash动画一样流畅。