为啥我的 CSS3 动画在 Google Chrome 中不流畅（但在其他浏览器上非常流畅）？

Posted 2023-03-05

技术标签:

【中文标题】为啥我的 CSS3 动画在 Google Chrome 中不流畅（但在其他浏览器上非常流畅）？【英文标题】：Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?为什么我的 CSS3 动画在 Google Chrome 中不流畅（但在其他浏览器上非常流畅）？ 【发布时间】：2016-10-04 10:15:07 【问题描述】：

我的环境（我得到滞后的地方）：

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

CODEPEN：

http://codepen.io/vieron/pen/hnEev

动画：

情况：

我用谷歌搜索了很多，但没有找到任何适合我的东西。我知道以前有人问过这个问题。

当我用 Safari 和 Firefox 打开网站时，我的 Mac 上的 CSS3 动画很流畅，但用 Chrome 就不行！

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

问题：

我的代码中的某些内容导致动画仅在 Chrome 上不稳定。它是什么，我该如何解决？

我看到了什么：

Chrome CSS 3 Transition Not Smooth

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

CSS3 transition not smooth in 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

代码：

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

<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 Profiler（选项 2（快照））：

编辑 2：

CSS3 transition not smooth in Chrome

我似乎刚刚在我的动画中发现了一个奇怪的行为。每次我移出视线并通过滚动回到它时，它都会“变大”（变大）。

这种行为似乎是上述问题的答案中所描述的。但是像建议的那样指定固定宽度并不能解决滞后问题。

编辑 3：

谷歌时间线（删除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 渲染引擎的问题！

【问题讨论】：

建议：添加一个重现问题的演示（包括标记）并删除[javascript]和[jquery]标签，除非它们与问题相关。 “奇怪的是，即使使用 Chrome，Codepen 也能流畅运行。” - 这表明实际网站和 Codepen 之间存在差异。继续将网站的部分内容添加到 codepen，直到您重现问题，并且您可能已经找到了原因。我在 Mac 上，我在 codepen 中没有延迟尝试使用 transform: translate3d(0, 0, 0) hack 并将其替换为 will-change: transform 或完全删除它，以防您使用 CSS 的其他部分创建太多层。 @AlessandroOrnano 没错。 【参考方案1】：

解决方案：

对不同的屏幕尺寸使用@media 的绝对定位。

解释：

它适用于所有其他浏览器，但不适用于 Chrome，因此无论您做什么都将专门针对 Chrome。

这为您提供了 3 个选项：

(1) 让 Google 修复 Chrome 或

(2) 使用适用于 Chrome 或

的解决方案

(3) 接受 Chrome 会不流畅。

TL;DR：

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

【讨论】：

我不想使用绝对定位，但谢谢你的回答。【参考方案2】：

我找到了“罪魁祸首”。

我在我的网站标题中使用了另一个 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 渲染引擎的问题！

【讨论】：

@JonSkeet 能否请您将此转发给 Chrome 团队（如果可以）？那真的很棒：D【参考方案3】：

为了使动画效果更好，您可以使用 CSS 的 will-change 属性。此属性向浏览器提示元素将要更改。

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

您可以在此处阅读有关will-change 的更多信息。

【讨论】：

【参考方案4】：

Chrome 在渲染时支持硬件加速，从而提高 css3 动画的性能。您可以通过应用 translateZ(0)、rotateZ(360deg) 或类似的方法来 trigger hardware acceleration，从而欺骗 Chrome。

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

backface-visibility: hidden;
perspective: 1000;

这也有助于解决当 GPU 被集成和/或受到限制（想想省电模式）以及其性能下降时的一些问题。这将解释 Macbook 上的视差性能问题！ ¯\_(ツ)_/¯

【讨论】：

对我来说没有任何改变.. 但是 Safari 中的动画非常流畅：|【参考方案5】：

我最近更新了我的 Nvidia GPU 驱动程序，Chrome 中的动画变得断断续续，即使硬件加速已打开。

对我有用的是重新激活硬件加速。

Google Chrome > Settings > Advanced > System > Use hardware acceleration when available

为了重新激活断开的链接，我关闭了硬件加速，重新启动了浏览器。在这里，我注意到动画和以前一样不稳定。然后我再次打开硬件加速，重新启动浏览器，硬件加速显然又被重新激活了，因为动画现在超级流畅。

我假设更新图形驱动程序破坏了 Chrome 与硬件加速的链接，只需要重新激活它。

【讨论】：

这对我有用。【参考方案6】：

尝试禁用您的 Chrome 扩展程序（这对我来说是个问题）

去 Chrome\Manage Extensions 切换切换按钮禁用它们，如果它工作正常，然后尝试一一启用，以了解究竟是哪个导致了问题。

【讨论】：

以上是关于为啥我的 CSS3 动画在 Google Chrome 中不流畅（但在其他浏览器上非常流畅）？的主要内容，如果未能解决你的问题，请参考以下文章

Firefox 和 CSS3 动画 - 为啥我的文本会抖动？

为啥这个 CSS3 动画在 Safari 和 Chrome 中不起作用？

css3动画为啥就是不动呢

为啥这个 CSS3 动画在 MS Edge 或 IE11 中不起作用？

a:hover 上的 CSS3 动画

CSS3animation动画为啥会出现抖动效果，怎么解决