Chrome中的Jerky CSS转换过渡

Question

我在背景图像上使用CSS3变换来悬停。

我已经在Opera，Safari和Firefox的最新浏览器中进行了测试，并且运行良好且流畅，但是在Chrome中，过渡非常不稳定。

Heres是链接，将鼠标悬停在社交图标上以查看我的意思.http://www.media-flare.com/pins/ - 我注意到当您将浏览器调整为移动视图时，它会变得更糟。

我在这里做了一个jsfiddle版本，并且因为很难看到它而放慢了转换速度。

http://jsfiddle.net/wsgfz/1/ - 这在铬和火狐中似乎生涩，在野生动物园和歌剧中很流畅。

我能做些什么来使过渡更顺畅吗？

如果你不能查看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

转换似乎比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 2

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属性的使用，以便浏览器可以对这些属性执行其他优化。根据我的个人经验，这似乎只在铬的不透明度和变换中引人注目。

element{
  will-change: transform, opacity;
}

Answer 3

基本问题

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

浏览器没有用于渲染动画的专用线程。动画必须与UI事件等其他浏览器活动竞争。有时浏览器也会与计算机上运行的其他软件竞争。此外，浏览器可用的硬件加速可能有限。

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

解决方案

防止不均匀性如此明显的最简单的解决方案是增加动画的速度，并且可选地移除或减少使用缓动。有可能使用一种在开始和结束时都不会减慢的缓和类型。

展望未来，另一种选择是使用WebGL的硬件加速（具有3D上下文的HTML5画布标签），这应该可以减轻问题。随着硬件加速变得越来越普遍并且在浏览器和设备上得到更好的支持，制作复杂的动画应该开始变得可行，这些动画像旧的Flash动画一样流畅。