Chrome 中生涩的 CSS 转换过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15605731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jerky CSS transform transition in Chrome
提问by Adam
I am using CSS3 transform on a background image to enlarge on hover.
我在背景图像上使用 CSS3 变换以在悬停时放大。
I have tested in the latest browsers of Opera, Safari and Firefox and work nice and smooth, however in Chrome the transition is very jerky.
我已经在 Opera、Safari 和 Firefox 的最新浏览器中进行了测试，并且运行良好且流畅，但是在 Chrome 中，过渡非常不稳定。
Heres is the link, hover over the social icons to see what I mean.. http://www.media-flare.com/pins/- I have noticed as you resize the browser down to mobile view, it gets worse.
这是链接，将鼠标悬停在社交图标上以了解我的意思.. http://www.media-flare.com/pins/- 我注意到当您将浏览器调整为移动视图时，情况会变得更糟。
I have done a jsfiddle version here and slowed down the transition as it is harder to see.
我在这里做了一个 jsfiddle 版本并减慢了过渡，因为它很难看到。
http://jsfiddle.net/wsgfz/1/- This seems jerky in chrome and firefox, smooth in safari and opera.
http://jsfiddle.net/wsgfz/1/- 这在 chrome 和 firefox 中似乎生涩，在 safari 和歌剧中流畅。
Is there anything I can do to make the transition smoother?
我可以做些什么来使过渡更顺畅？
Here is the code if you cannot view jsfiddle
如果您无法查看 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>采纳答案by Adam
Transformations seem to work better than transitions in Chrome. Try this:
转换似乎比 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>The flickering effect one quick mouse in/out should be gone too now.
快速鼠标进/出的闪烁效果现在也应该消失了。
回答by Zze
Update 2017
2017 年更新
In response to @Matt Coughlin's post, browsers that natively support animation, now render CSS and JS animations on their own thread....
为了回应@Matt Coughlin 的帖子，原生支持动画的浏览器现在在自己的线程上渲染 CSS 和 JS 动画......
CSS-based animations, and Web Animations where supported natively, are typically handled on a thread known as the "compositor thread." This is different from the browser's "main thread", where styling, layout, painting, and JavaScript are executed. This means that if the browser is running some expensive tasks on the main thread, these animations can keep going without being interrupted.
基于 CSS 的动画和本机支持的 Web 动画通常在称为“合成器线程”的线程上处理。这与浏览器的“主线程”不同，在主线程中执行样式、布局、绘制和 JavaScript。这意味着如果浏览器在主线程上运行一些昂贵的任务，这些动画可以继续进行而不会被中断。
https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance
https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance
This developers doc also supports the currently accepted answer from @user1467267...
该开发人员文档还支持@user1467267 目前接受的答案...
Where you can, you should avoid animating properties that trigger layout or paint. For most modern browsers, this means limiting animations to opacity or transform, both of which the browser can highly optimize; it doesn't matter if the animation is handled by JavaScript or CSS.
在可能的情况下，您应该避免为触发布局或绘制的属性设置动画。对于大多数现代浏览器，这意味着将动画限制为opacity 或 transform，浏览器可以高度优化这两者；动画是由 JavaScript 还是 CSS 处理并不重要。
The document also suggests implementing the use of the will-changeproperty for the property which you will be animating so that the browser can perform additional optimisations for these properties. In my personal experience, this only seems to be noticeable in chrome for opacity and transform.
该文档还建议will-change为您将设置动画的属性实现该属性的使用，以便浏览器可以对这些属性执行额外的优化。根据我的个人经验，这似乎仅在 chrome 中的不透明度和转换中才明显。
element{
will-change: transform, opacity;
}
回答by Matt Coughlin
Fundamental issue
根本问题
When an animation runs slowly and looks uneven, it's simply exposing the limitations of the browser that are always there.
当动画运行缓慢并且看起来不均匀时，它只是暴露了浏览器始终存在的限制。
Browsers don't have a dedicated thread for rendering animations. Animations have to compete with other browser activities like UI events. And at times the browser is also competing with other software running on the computer. Plus the hardware acceleration available to browsers is likely somewhat limited.
浏览器没有用于渲染动画的专用线程。动画必须与其他浏览器活动（如 UI 事件）竞争。有时，浏览器还会与计算机上运行的其他软件竞争。此外，浏览器可用的硬件加速可能有些有限。
Animations with easing run even slower at the start and/or end of the animation, which makes the natural unevenness of animations even more obvious.
带有缓动的动画在动画开始和/或结束时运行得更慢，这使得动画的自然不均匀性更加明显。
Solutions
解决方案
The simplest solution to prevent the unevenness from being so obvious is to increase the speed of the animation, and optionally remove or lessen the use of easing. It may be possible to use a type of easing that doesn't slow down quite as much at the beginning and end.
防止不均匀性如此明显的最简单的解决方案是提高动画的速度，并可选地删除或减少缓动的使用。可以使用一种在开始和结束时不会减慢太多的缓动类型。
Going forward, another option is to use the hardware acceleration of WebGL (HTML5 canvas tag with a 3D context), which should lessen the issue. As hardware acceleration becomes more common and better-supported on browsers and devices, it should start to be feasible to make complex animations that run as smoothly as older Flash animations.
展望未来，另一种选择是使用 WebGL（具有 3D 上下文的 HTML5 画布标签）的硬件加速，这应该会减少问题。随着硬件加速变得越来越普遍并且在浏览器和设备上得到更好的支持，制作像旧 Flash 动画一样流畅运行的复杂动画应该开始变得可行。
