为什么我的CSS3动画在谷歌浏览器中不流畅（但在其他浏览器上非常流畅）？
我的环境（我在哪里获得LAG）：
Mac OSX El Capitan 10.11.2 on Chrome Version 50.0.2661.102（64-bit）
CODEPEN：
http://codepen.io/vieron/pen/hnEev
动画：
状况：
我搜索了很多内容而没有发现任何对我有用的内容。我知道之前已经提出过这个问题。
当我使用Safari和Firefox打开网站时，我的Mac上的CSS3动画流畅，但不是Chrome！
奇怪的是，原始的CodePen在Chrome上很流畅。
问题：
我的代码中的某些内容导致动画仅在Chrome上出现波动。它是什么，我该如何解决？
我看到了什么：
我需要相对于不同的屏幕尺寸我的定位。
-
http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser
-
https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/
-
http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser
CODE：
HTML
<div class="marquee">
<ul>
<li>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
</li>
<li>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
</li>
<li>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
</li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
@-webkit-keyframes loop {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-66.6%);
-ms-transform: translateX(-66.6%);
-webkit-transform: translateX(-66.6%);
transform: translateX(-66.6%);
}
}
@-moz-keyframes loop {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-66.6%);
-ms-transform: translateX(-66.6%);
-webkit-transform: translateX(-66.6%);
transform: translateX(-66.6%);
}
}
@-ms-keyframes loop {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-66.6%);
-ms-transform: translateX(-66.6%);
-webkit-transform: translateX(-66.6%);
transform: translateX(-66.6%);
}
}
@keyframes loop {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-66.6%);
-ms-transform: translateX(-66.6%);
-webkit-transform: translateX(-66.6%);
transform: translateX(-66.6%);
}
}
.cssanimations .marquee {
position: relative;
width: 90%;
margin: auto;
overflow: hidden;
}
.cssanimations .marquee > ul {
list-style: none;
position: relative;
z-index: 1;
top: 0;
left: 0;
width: 300% !important;
height: 80px;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation: loop 20s linear infinite;
-moz-animation: loop 20s linear infinite;
-o-animation: loop 20s linear infinite;
animation: loop 20s linear infinite;
}
.cssanimations .marquee > ul > li {
white-space: normal;
position: relative;
text-align: justify;
text-justify: distribute-all-lines;
line-height: 0;
letter-spacing: -0.31em;
float: left;
width: 33.333333%;
overflow: hidden;
height: 80px;
}
.cssanimations .marquee > ul > li:before {
content: '';
position: relative;
height: 100%;
width: 0;
}
.cssanimations .marquee > ul > li:before,
.cssanimations .marquee > ul > li > * {
vertical-align: middle;
display: inline-block;
}
.cssanimations .marquee > ul > li:after {
content: '.';
display: inline-block;
height: 0 !important;
width: 100%;
overflow: hidden !important;
visibility: hidden;
font-size: 0;
word-spacing: 100%;
}
.cssanimations .marquee > ul > li > * {
display: inline-block;
vertical-align: middle;
text-align: left;
line-height: 1;
letter-spacing: 0;
}
.cssanimations .marquee > ul > li img {
margin: 0 1.6%;
}
.marquee ul li a{
display: inline-block;
height: 80%;
}
.marquee ul li a img {
max-height: 100%;
}
HTML中的链接
<script src="Vendors/js/modernizr.js" type="text/javascript"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
重要N.B。：
我只添加了CodePen：
.marquee ul li a{
display: inline-block;
height: 80%;
}
.marquee ul li a img {
max-height: 100%;
}
删除此功能无法解决问题。
编辑1：
Google Chrome Profiler（选项1）：
Google Chrome Profiler（选项2（快照））：
编辑2：
CSS3 transition not smooth in Chrome
我似乎刚刚在动画中发现了一个奇怪的行为。每次我移开视线并通过滚动重新开始时，它会“增长”（变大）。
此行为似乎是上述问题的答案中描述的内容。但是指定像建议的固定宽度并没有解决滞后问题。
编辑3：
Google时间轴（删除gravity.js后）：
编辑4：
这很奇怪。在评论并取消注释某些行之后（基本上回到有滞后的代码时），动画性能变得更好。不像Safari或Firefox那样流畅，但仍然更流畅。
编辑5：
我找到了“罪魁祸首”。
我在网站的标题中使用了另一个codepen：
https://codepen.io/saransh/pen/BKJun
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
%span
PURE CSS
%br
%span
PARALLAX PIXEL STARS
删除它会使另一个动画变得平滑。
尽管如此：
这并不能解释为什么Firefox和Safari中的一切都很流畅，但Chrome中没有。
Chrome功能不强吗？
我向Chrome提交了一份报告，希望他们会在这里回答，但不能保证。
如果有人可以从谷歌/ Chrome上获得答案，我会给予他/她赏金。
更新6：
在Opera浏览器上试过。完全一样的滞后！现在我们知道BLINK渲染引擎存在问题！
6 个答案:
答案 0 :(得分：7)
Chrome在渲染时支持硬件加速，从而提高了css3动画的性能。您可以translateZ(0)应用rotateZ(360deg)，backface-visibility: hidden;
perspective: 1000;
或类似Chrome的技巧来trigger hardware acceleration。
一旦你通过应用上面的技巧来使用硬件加速（或者如果你已经在使用它，但引用的代码示例不完整和/或第三方库正在为你处理它）< / em>，您可以根据需要使用前缀来进一步提高性能：
-Djava.util.logging.manager=bad.idea.OdiousLogManager这也有助于解决GPU集成和/或受限制时的一些问题（想想省电模式），并且性能下降。这可以解释macbook上的视差性能问题！ ¯\ _（ツ）_ /¯
答案 1 :(得分：4)
<强> SOLUTION：
对@media使用绝对定位以适应不同的屏幕尺寸。
<强>说明
它适用于所有其他浏览器，而不适用于Chrome，因此无论您做什么都将专门用于Chrome。
这为您提供了3个选项：
-
（1）让谷歌修复Chrome或
-
（2）使用适用于Chrome或
的解决方案
-
（3）接受Chrome将不会顺利。
<强> TL; DR：
你知道绝对定位会起作用。
答案 2 :(得分：2)
我找到了＆＃34;罪魁祸首＆＃34;。
我在我的网站标题中使用了另一个codepen：
https://codepen.io/saransh/pen/BKJun
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
%span
PURE CSS
%br
%span
PARALLAX PIXEL STARS
删除它会使另一个动画变得平滑。
<强>尽管如此：
这并不能解释为什么一切都在Firefox和Safari中流畅，但在Chrome中却没有。
Chrome功能不强吗？
我向Chrome提交了一份报告，希望他们会在这里回答，但不能保证。
如果有人可以从谷歌/ Chrome上获得答案，我会给予他/她赏金。
更新6：
在Opera浏览器上试过。完全一样的滞后！现在我们知道BLINK渲染引擎存在问题！
答案 3 :(得分：1)
为了更好地制作动画，您可以使用CSS的will-change属性。此属性提示浏览器元素将要更改。
https://developer.mozilla.org/en/docs/Web/CSS/will-change
您可以在此处详细了解will-change。
答案 4 :(得分：0)
我最近更新了Nvidia GPU驱动程序，即使启用了硬件加速，Chrome中的动画也变得不稳定。
对我有用的是重新激活硬件加速。
Google Chrome > Settings > Advanced > System > Use hardware acceleration when available
要重新激活断开的链接，我关闭了硬件加速，重新启动了浏览器。在这里，我注意到动画像以前一样不稳定。然后，我再次打开硬件加速，重新启动浏览器，并且由于动画现在变得非常流畅，因此显然已经再次激活了硬件加速。
我认为更新图形驱动程序会破坏Chrome与硬件加速的链接，只需重新激活它即可。
答案 5 :(得分：0)
尝试禁用您的 Chrome 扩展程序（这对我来说是个问题）
转到 Chrome\Manage Extensions 切换切换按钮以禁用它们，如果它工作正常，然后尝试一一启用，以了解究竟是哪个导致了问题。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？