为什么我的CSS3animation不能在Google Chrome浏览器中stream畅播放（但在其他浏览器上却很stream畅）？

我的环境（我在哪里得到延迟）：

Chrome上的Mac OSX El Capitan 10.11.2版本50.0.2661.102（64位）

CODEPEN：

animation：

在这里输入图像说明

情况：

我search了很多，没有find任何适合我的东西。我知道这个问题之前已经被问过了。

当我使用Safari和Firefox打开网站时，我的Mac上的CSS3animation非常stream畅，但Chrome浏览器不支持！

奇怪的是，原来的CodePen在Chrome上很stream畅。

问题：

我的代码中的某些内容导致animation只在Chrome上出现波涛汹涌。这是什么，我该如何解决？

我看到了什么：

Chrome CSS 3转换不顺畅

我需要我的定位是相对适应不同的屏幕尺寸。

Chrome中的CSS3转换不顺畅
How to Create Smoother Animations and Transitions in the Browser
Fixing CSS Transitions in Google Chrome
How to Create Smoother Animations and Transitions in the Browser

码：

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%; }

JS中的链接在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>

重要提示：

只有我添加到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浏览器分析器（选项2（快照））：

在这里输入图像说明

编辑2：

Chrome中的CSS3转换不顺畅

我似乎刚刚在我的animation中发现了一个奇怪的行为。每次通过滚动移动到视线之外，它都会“增长”（变大）。

这种行为似乎是上述问题的答案中所描述的。但是，如指定一个固定的宽度build议并没有解决滞后。

编辑3：

Google时间轴（移除gravity.js后）：

在这里输入图像说明

编辑4：

这很奇怪在评论和注释了一些行后（基本上回到代码出现滞后时），animationperformance变得更好。不像Safari或Firefox那样stream畅，但仍然stream畅。

编辑5：

我find了“罪魁祸首”。

我在我的网站标题中使用另一个codepen：

 <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

删除它使其他animation平滑。

但是：

这并不能解释为什么在Firefox和Safari浏览器中一切都很顺利，而不是在Chrome浏览器中。

Chromefunction不强吗？

我向Chrome提交了一份报告，希望他们能在这里回答，但不能保证。

如果有人可以从Google / Chrome上得到答案，我就奖励他/她的赏金。

更新6：

试图在Opera浏览器。完全一样的滞后！现在我们知道这是BLINK渲染引擎的问题！

解：

使用@media进行绝对定位以适应不同的屏幕尺寸。

说明：

它适用于所有其他浏览器，而不是Chrome，所以无论你做什么，都将专门针对Chrome。

这给你3个选项：

（1）让Google修复Chrome或
（2）使用可与Chrome或
（3）接受Chrome将不会顺畅。

TL; DR：

你知道绝对定位会起作用。

Chrome在渲染时支持硬件加速，改善css3animation的性能。你可以通过应用translateZ(0) ， rotateZ(360deg)或者类似的方法触发硬件加速。

一旦你通过应用上述技巧来使用硬件加速（或者如果你已经在使用它，但是引用的代码示例是不完整的和/或第三方库已经为你处理的话） ，你可以进一步提高性能根据需要应用前缀：

 backface-visibility: hidden; perspective: 1000;

这也有助于解决GPU集成和/或节stream（考虑省电模式）时的一些问题，并降低其性能。这将解释macbook上的视差性能的问题！ ¯\ _（ツ）_ /¯

我find了“罪魁祸首”。

我在我的网站标题中使用另一个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

删除它使其他animation平滑。

但是：

这并不能解释为什么在Firefox和Safari浏览器中一切都很顺利，而不是在Chrome浏览器中。

Chromefunction不强吗？

我向Chrome提交了一份报告，希望他们能在这里回答，但不能保证。

如果有人可以从Google / Chrome上得到答案，我就奖励他/她的赏金。

更新6：

试图在Opera浏览器。完全一样的滞后！现在我们知道这是BLINK渲染引擎的问题！

为了使animation更好，你可以使用CSS的will-change属性。这个属性提示浏览器该元素将会改变。

https://developer.mozilla.org/en/docs/Web/CSS/will-change

你可以在这里阅读更多关于will-change 。