29

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

4

3 回答 3

24

2017 年更新

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

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

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

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

在可能的情况下，您应该避免对触发布局或绘制的属性进行动画处理。对于大多数现代浏览器，这意味着将动画限制为opacity 或 transform，浏览器可以对这两者进行高度优化；动画是由 JavaScript 还是 CSS 处理并不重要。

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

element{
  will-change: transform, opacity;
}
于 2017-02-15T04:04:41.803 回答
22

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

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

于 2013-03-25T00:18:26.120 回答
16

基本问题

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

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

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

解决方案

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

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

于 2013-03-25T02:08:49.300 回答