当前位置：theitroad>Html 为什么我的 CSS3 动画在 Google Chrome 中不流畅（但在其他浏览器上非常流畅）？

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/37629745/
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

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 13:21:45 　来源:igfitidea点击:

Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?

htmlcssgoogle-chromeanimation

提问by Coder1000

MY ENVIRONMENT (WHERE I GET THE LAG):

我的环境（我在哪里得到滞后）：

Mac OSX El Capitan 10.11.2 on Chrome Version 50.0.2661.102 (64-bit)

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

CODEPEN:

代码笔：

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

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

ANIMATION:

动画片：

enter image description here

在此处输入图片说明

SITUATION:

情况：

I googled this a lot without finding anything that works for me. I know this questions has been asked before.

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

The CSS3 animation is smooth on my Mac when I open the website with Safari and Firefox, but not with Chrome!

当我使用 Safari 和 Firefox 打开网站时，CSS3 动画在我的 Mac 上很流畅，但在 Chrome 中则不然！

Strangely enough, the original CodePen is smooth on Chrome.

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

PROBLEM:

问题：

Something in my code is causing the animation to be choppy only on Chrome. What is it and how can I fix it ?

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

WHAT I LOOKED AT:

我看到的：

I need my positioning to be relative to adapt to different screen sizes.

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

CODE:

代码：

HTML

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

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 LINKS IN THE HTML

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>

IMPORTANT N.B.:

重要提示：

Only thing I added to the CodePen:

我添加到 CodePen 的唯一内容：

.marquee ul li a{
    display: inline-block; 
    height: 80%;
}

.marquee ul li a img {
    max-height: 100%;
}

Removing this doesn't solve the issue.

删除它并不能解决问题。

EDIT 1:

编辑 1：

Google Chrome Profiler (option 1):

Google Chrome Profiler（选项 1）：

enter image description here

在此处输入图片说明

Google Chrome Profiler (option 2 (Snapshot)):

Google Chrome Profiler（选项 2（快照））：

enter image description here

在此处输入图片说明

EDIT 2:

编辑2：

CSS3 transition not smooth in Chrome

Chrome 中的 CSS3 过渡不平滑

I seem to have just found a strange behaviour in my animation. It "grows" (gets larger) every time I move out of sight and back on it by scrolling.

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

This behaviour seems to be what is described in the answer to the question above. But specifying a fixed width like suggested didn't fix the lag.

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

EDIT 3:

编辑 3：

Google Timeline (after removing gravity.js):

谷歌时间线（移除gravity.js后）：

enter image description here

在此处输入图片说明

EDIT 4:

编辑 4：

This is weird. After commenting and uncommenting some lines (basically going back to what the code was when there was lag), the animation performance became better. Not as smooth as in Safari or Firefox, but still smoother.

这很奇怪。在注释和取消注释某些行后（基本上回到代码出现滞后时的状态），动画性能变得更好。不像在 Safari 或 Firefox 中那样流畅，但仍然更流畅。

EDIT 5:

编辑 5：

I found the "culprit".

我找到了“罪魁祸首”。

I am using another codepen in my website's header :

我在我的网站标题中使用了另一个代码笔：

https://codepen.io/saransh/pen/BKJun

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

Removing it makes the other animation smooth.

删除它会使其他动画平滑。

NONETHELESS:

尽管如此：

This doesn't explain why everything is smooth in Firefox and Safari but not in Chrome.

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

Is Chrome less powerful ?

Chrome 不那么强大吗？

I filed a report to Chrome and hope they will answer here but there is no guarantee.

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

If someone can get an answer from Google / Chrome on this, I award him/her the bounty.

如果有人能从谷歌/Chrome 上得到答案，我会奖励他/她。

UPDATE 6:

更新 6：

Tried on the Opera browser. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine !

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

采纳答案by Coder1000

I found the "culprit".

我找到了“罪魁祸首”。

I am using another codepen in my website's header :

我在我的网站标题中使用了另一个代码笔：

https://codepen.io/saransh/pen/BKJun

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

Removing it makes the other animation smooth.

删除它会使其他动画平滑。

NONETHELESS:

尽管如此：

This doesn't explain why everything is smooth in Firefox and Safari but not in Chrome.

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

Is Chrome less powerful ?

Chrome 不那么强大吗？

I filed a report to Chrome and hope they will answer here but there is no guarantee.

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

If someone can get an answer from Google / Chrome on this, I award him/her the bounty.

如果有人能从谷歌/Chrome 上得到答案，我会奖励他/她。

UPDATE 6:

更新 6：

Tried on the Opera browser. Exactly the same lag ! Now we know it's a problem with the BLINK rendering engine !

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

回答by o.v.

Chrome supports hardware acceleration when rendering, improving performance for css3 animations. You can trigger hardware accelerationby applying translateZ(0), rotateZ(360deg)or similar which tricks Chrome into it.

Chrome 在渲染时支持硬件加速，提高了 css3 动画的性能。您可以通过应用或类似的方法来触发硬件加速translateZ(0)，rotateZ(360deg)从而诱使 Chrome 进入它。

Once you're using hardware acceleration by applying the trick above (or if you were already using it, but the cited code sample was incomplete and/or a third party library was taking care of it for you), you can further improve performance by applying, with prefixes as needed:

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

backface-visibility: hidden;
perspective: 1000;

This also helps address some issues when the GPU is integrated and/or being throttled (think power-saving mode), and its performance degrades. This would explain issues with parallax performance on a macbook! ˉ\_(ツ)_/ˉ

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

回答by HenryM

SOLUTION:

解决方案：

Use absolute positioning with @media for different screen sizes.

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

EXPLANATION:

解释：

It works for all other browsers and not Chrome so whatever you do will be specifically for Chrome.

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

This gives you 3 options:

这为您提供了 3 个选项：

  • (1) get Google to fix Chrome or

  • (2) use a solution that will work with Chrome or

  • (3) accept it will not be smooth with Chrome.

  • (1) 让谷歌修复 Chrome 或

  • (2) 使用适用于 Chrome 的解决方案或

  • (3) 接受 Chrome 不会流畅。

TL;DR:

特尔；博士：

You know absolute positioning will work.

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

回答by Saiyam Gambhir

To make animations better you can use will-changeproperty of CSS. This property hints the browser that the element is going to change.

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

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

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

You can read here more about will-change.

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

相关推荐

HTML 文件中的 Visual Studio 代码注释

HTML 文件中的 Visual Studio 代码注释

Html 使用 css 在复选框条件下显示和隐藏 div

Html 使用 css 在复选框条件下显示和隐藏 div

Html 如何更改字体真棒图标的颜色

Html 如何更改字体真棒图标的颜色

Html 将一串文本放在一行上

Html 将一串文本放在一行上

相关推荐
最近更新
标签