提高CSS3转换性能 [英] Improving CSS3 transition performance

问题描述

有没有人有骗子或提示如何提高CSS3动画的平滑度？我使用css过渡滑动整个页面向左，它是一个比我想要的更多的juttery。这是一个单一的元素，但它包含许多圆角，渐变，阴影等，因为它是一个复杂的页面。

在flash动作脚本，有一个方便的属性 cacheAsBitmap ，它在动画开始之前将动画元素转换为位图。这是一个godsend和显着加快某些类型的动画。 CSS有什么这样的吗？有没有其他提示，以提高性能，而不简化页面设计？

解决方案

之前 will-change 指令，您不能以相同的字面方式你可以在其他语言。浏览器（或至少Webkit）通过绘制各种图层来处理渲染页面。它应该在理论上足够聪明，为你的图层，但有时它是一个好主意，迫使一些东西到自己的图层。

有时工作，有时

在CSS中，一种方法是迫使某物到层中是使用3D变换来变换它。一个常见的策略是添加：

  transform：translateZ（0）; 
  

或等价物：

  transform：translate3d（0,0,0）; 
  

或有点疯狂：

  transform：rotateZ（360deg）; 
  

或翻译结合：

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

如果事情是flickery。

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

对于转换，除none之外的任何值都会导致创建
的堆栈上下文和一个包含块。

这些都需要仔细测试，并不是只是总是塞在任何可能需要它 - 有时更好，有时也没有不同，有时更糟糕！

祝你好运！

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.

In flash actionscript, there is a handy property cacheAsBitmap which 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.

解决方案

Before the will-change directive, 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.

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:

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,

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

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!

这篇关于提高CSS3转换性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！