改善CSS3过渡性能

Question

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

在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;

如果事情是闪烁的.

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

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

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

祝好运!

Answer 2

以来

• Chrome 36
• Firefox 38
• 歌剧30
• Android浏览器40
• 适用于Android的Chrome 42

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

.drawer {
    will-change: transform;
}

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

有关更多信息,请阅读该报价的完整文章.

Answer 3

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

Answer 4

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

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

目前提高性能的最佳方法是限制一次动画/转换的内容.