问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我的环境（哪里有问题）：

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

密码本：

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

动画：

在此处输入图像描述

情况：

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

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

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

问题：

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

我看到了什么：

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

代码：

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 过渡在 Chrome 中不平滑

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

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

编辑 3：

谷歌时间轴（删除 gravity.js 后）：

在此处输入图像描述

编辑 4：

这很奇怪。在注释和取消注释某些行之后（基本上回到有延迟时的代码），动画性能变得更好。不如在 Safari 或 Firefox 中流畅，但仍然流畅。

编辑 5：

我找到了“罪魁祸首”。

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

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 提交了一份报告，希望他们会在这里回答，但不能保证。

如果有人可以从 Google / Chrome 中得到答案，我会奖励他/她。

更新 6：

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

原文由 Coder1000 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssgoogle-chromeanimation
阅读 592
2 个回答
得票最新
社区维基
1
✓ 已被采纳

我找到了“罪魁祸首”。

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

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 提交了一份报告，希望他们会在这里回答，但不能保证。

如果有人可以从 Google / Chrome 中得到答案，我会奖励他/她。

更新 6：

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

原文由 Coder1000 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

Chrome 在渲染时支持硬件加速，提高 css3 动画的性能。您可以通过应用 translateZ(0) ， rotateZ(360deg) 或类似的东西来 触发硬件加速，这会欺骗 Chrome。

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

 backface-visibility: hidden;
perspective: 1000;

这也有助于解决当 GPU 被集成和/或被节流（想想省电模式）时的一些问题，并且它的性能会下降。这可以解释 macbook 上的视差性能问题！ ¯\(ツ)/¯

原文由 Oleg 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题