Html 提高 CSS3 过渡性能

Improving CSS3 transition performance

提问by cronoklee

Does anyone have cheats or tips for how to improve the smoothness of CSS3 animation? I'm sliding the entire page to the left using a css transition and it's a bit more juttery than I'd like. It's a single element but it contains numerous rounded corners, gradients, drop shadows, etc as it's a complicated page.

有没有人有关于如何提高 CSS3 动画流畅度的秘籍或技巧？我正在使用 css 过渡将整个页面向左滑动，这比我想要的要多一些。这是一个单一的元素，但它包含许多圆角、渐变、阴影等，因为它是一个复杂的页面。

In flash actionscript, there is a handy property cacheAsBitmapwhich converts the animating element into a bitmap before the animation begins. This is a godsend and significantly speeds up certain types of animation. Is there anything like this for CSS? Are there any other tips out there to improve performance without simplifying the page design? I'm thinking things like enabling hardware acceleration or flagging the animation as high priority for the browser.

在 Flash 动作脚本中，有一个方便的属性cacheAsBitmap可以在动画开始之前将动画元素转换为位图。这是天赐之物，可以显着加速某些类型的动画。CSS有这样的东西吗？有没有其他提示可以在不简化页面设计的情况下提高性能？我正在考虑诸如启用硬件加速或将动画标记为浏览器的高优先级之类的事情。

回答by Rich Bradshaw

Before the will-changedirective, you couldn't do this in the same literal way that you can in other languages. The browser (or at least Webkit) dealt with rendering the page by drawing various layers. It should in theory be intelligent enough to work out the layers for you, but sometimes it was a good idea to force something into its own layer.

之前的will-change指令，你无法在相同的文字方式，你可以在其他语言中做到这一点。浏览器（或至少是 Webkit）通过绘制不同的层来处理页面的呈现。从理论上讲，它应该足够智能，可以为您计算层，但有时将某些东西强加到它自己的层中是个好主意。

Sometimes that worked, sometimes it didn't, depending on exactly what's going on.

有时有效，有时无效，具体取决于发生了什么。

Anyway.

反正。

In CSS, one way to force something into a layer is to transform it using a 3D transform. A common strategy is to add either:

在 CSS 中，将某物强制放入图层的一种方法是使用 3D 变换对其进行变换。一个常见的策略是添加：

transform: translateZ(0);

or the equivalent:

或等价物：

transform: translate3d(0,0,0);

or the slightly crazy:

或者有点疯狂：

transform: rotateZ(360deg);

or the translate ones combined with:

或翻译的结合：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

if things are flickery.

如果事情是忽悠的。

These create a new layer as that's what the spec defines. From http://www.w3.org/TR/css3-transforms/#transform-property,

这些创建了一个新层，因为这是规范定义的。从http://www.w3.org/TR/css3-transforms/#transform-property，

"Any value other than ‘none' for the transform results in the creation of both a stacking context and a containing block."

“转换的除‘none’以外的任何值都会导致创建堆叠上下文和包含块。”

These all need careful testing, and aren't something to just always bung on anything that might need it – sometimes it's better, sometimes it's no different, and sometimes it's worse!

这些都需要仔细测试，并且不是总是塞在任何可能需要它的东西上——有时更好，有时没有什么不同，有时更糟！

Good luck!

祝你好运！

回答by Marc Dingena

Since

自从

• Chrome 36
• Firefox 38
• Opera 30
• Android Browser 40
• Chrome for Android 42

• 铬 36
• 火狐 38
• 歌剧 30
• 安卓浏览器 40
• 安卓版 Chrome 42

you can use will-changeto inform the browser to prepare for hardware accelerating elements.

您可以使用will-change通知浏览器准备硬件加速元素。

.drawer {
    will-change: transform;
}

The will-changeproperty allows you to inform the browser ahead of time of what kinds of changes you are likely to make to an element, so that it can set up the appropriate optimizations before they're needed, therefore avoiding a non-trivial start-up cost which can have a negative effect on the responsiveness of a page. The elements can be changed and rendered faster, and the page will be able to update snappily, resulting in a smoother experience.

该will-change属性允许您提前通知浏览器您可能对元素进行哪些类型的更改，以便它可以在需要之前设置适当的优化，从而避免重要的启动成本这会对页面的响应能力产生负面影响。可以更快地更改和呈现元素，并且页面将能够快速更新，从而带来更流畅的体验。

For more information, you can read the full articleof that quote.

有关更多信息，您可以阅读该报价的全文。

回答by Brian

From what I've read, drop shadows are one of the biggest performance hits at the moment. You could try adding/remove a class at the start/end of the animation to disable all the shadows for a moment, and fade them back in after the movements.

据我所知，阴影是目前最大的性能影响之一。您可以尝试在动画的开始/结束时添加/删除一个类以暂时禁用所有阴影，并在移动后将它们淡入。

回答by Joshua

Unfortunately this is limited by a number of things, many which you cannot control:

不幸的是，这受到许多因素的限制，其中许多是您无法控制的：

• Browser performance - all browsers behave differently with CSS3 and Javascript. I have found Safari to be among the best (surprisingly?) in terms of CSS3 rendering performance, with Chrome in second and Firefox in 3rd.
• GPU performance - Some browsers now offload animation & transition operations to the GPU, in which case the speed / performance is limited by the GPU. If you're on an Integrated Intel GPU, it's not likely to be very smooth compared with a discrete NVIDIA or AMD graphics card.
• CPU performance - For situations where browsers do NOT offload to GPU, the CPU is used in which case your CPU becomes the bottleneck.
• Number of other tabs / windows open - many browsers share processes across tabs, and other animations or CPU-consuming operations happening in other tabs / browsers could create performance degredation.

• 浏览器性能 - 所有浏览器对 CSS3 和 Javascript 的表现都不同。我发现 Safari 在 CSS3 渲染性能方面名列前茅（令人惊讶？），Chrome 排名第二，Firefox 排名第三。
• GPU 性能 - 一些浏览器现在将动画和过渡操作卸载到 GPU，在这种情况下，速度/性能受到 GPU 的限制。如果您使用的是集成英特尔 GPU，与独立的 NVIDIA 或 AMD 显卡相比，它不太可能非常流畅。
• CPU 性能 - 对于浏览器不卸载到 GPU 的情况，会使用 CPU，在这种情况下，您的 CPU 将成为瓶颈。
• 打开的其他选项卡/窗口的数量 - 许多浏览器跨选项卡共享进程，其他选项卡/浏览器中发生的其他动画或 CPU 消耗操作可能会导致性能下降。

The best way to improve performance currently is to limit the number of things that are being animated / transitioned all at once.

当前提高性能的最佳方法是限制同时进行动画/过渡的事物的数量。