改善CSS3过渡性能

Question

有没有人对如何提高CSS3动画的流畅度有一些作弊技巧？我使用css过渡将整个页面向左滑动，比我想要的更加混乱。它是一个元素，但由于页面复杂，因此包含许多圆角，渐变，阴影等。

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

Answer 1

在使用该will-change指令]之前，您无法像使用其他语言那样以原义方式进行此操作。浏览器（或至少是Webkit）通过绘制各种图层来处理页面渲染。从理论上讲，它应该足够智能，可以为您确定各层，但是有时最好将某些内容强制放入自己的层中。

有时会奏效，有时则不会奏效，具体取决于发生了什么。

无论如何。

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

transform: translateZ(0);

或等效的：

transform: translate3d(0,0,0);

还是有点疯狂：

transform: rotateZ(360deg);

或翻译后的内容与：

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

如果事情忽悠。

这些将创建一个新层，这就是规范所定义的。

“转换中除“ none”以外的任何值都将导致创建堆栈上下文和包含块。”

这些都需要经过仔细的测试，并不是总会被任何可能需要的东西所束缚–有时更好，有时没有什么不同，有时更糟！

祝好运！