Question

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

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

Answer 1

在the will-change directive之前，您无法以与其他语言相同的字面方式执行此操作。浏览器（或至少Webkit）通过绘制各种层来处理渲染页面。理论上它应该足够聪明，可以为你设计图层，但有时强迫某些东西进入它自己的图层是个好主意。

有时候这种方法有效，有时却没有，具体取决于究竟发生了什么。

反正。

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

transform: translateZ(0);

或同等的：

transform: translate3d(0,0,0);

或者有点疯狂：

transform: rotateZ(360deg);

或翻译的结合：

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

如果事情发生了变化。

这些创建了一个新的图层，就像规范所定义的那样。来自http://www.w3.org/TR/css3-transforms/#transform-property，

“变换的'none'以外的任何值都会导致创建堆叠上下文和包含块的内容。“

这些都需要仔细测试，而不是总是在任何可能需要它的东西上打字 - 有时它会更好，有时它没有什么不同，有时它更糟糕！

祝你好运！

Answer 2

由于

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

you can use will-change通知浏览器准备硬件加速元素。

.drawer {
    will-change: transform;
}

will-change属性允许您提前通知浏览器你可能对一个元素做出什么样的改变的时间，所以它可以在它们之前设置适当的优化需要，因此避免可能有的非平凡的启动成本对页面响应性的负面影响。 元素可以更改和渲染速度更快，页面将能够更新不好意思，导致更顺畅的体验。

有关详细信息，您可以read the full article报价。

Answer 3

从我读过的内容来看，阴影是目前性能最高的打击之一。您可以尝试在动画的开头/结尾添加/删除一个类以暂时禁用所有阴影，并在移动后淡入它们。

Answer 4

不幸的是，这受到许多事情的限制，许多事情是你无法控制的：

浏览器性能 - 所有浏览器对CSS3和Javascript的行为都不同。我发现Safari在CSS3渲染性能方面是最好的（令人惊讶的？），Chrome排在第二位，Firefox排在第3位。
GPU性能 - 有些浏览器现在可以卸载动画＆amp;转换到GPU的操作，在这种情况下，速度/性能受GPU限制。如果您使用的是集成式英特尔GPU，与分立的NVIDIA或AMD显卡相比，它可能不会非常流畅。
CPU性能 - 对于浏览器没有卸载到GPU的情况，使用CPU会导致CPU成为瓶颈。
其他标签/窗口打开的数量 - 许多浏览器跨标签共享进程，而其他标签/浏览器中发生的其他动画或CPU消耗操作可能会导致性能下降。

目前提高效果的最佳方法是限制一次动画/转换的内容。

改善CSS3过渡性能

4 个答案: