Question

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

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

Heres是链接，将鼠标悬停在社交图标上以查看我的意思。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

转换似乎比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动画一样流畅。

Chrome中的Jerky CSS转换过渡

3 个答案: