使用GPU防止闪烁和拖尾（重绘）CSS3过渡

因此，今天我仔细研究了如何使用GPU处理flickr并跟踪（重绘）CSS3过渡 。 屏幕截图显示了CSS3比例重绘，在chrome上留下了痕迹。 然后，在后面的文章中快速浏览一些CSS3控件属性。

硬件加速

硬件加速是浏览器整体渲染性能的重要里程碑。 一般方案是将原本由主CPU计算的任务卸载到计算机图形适配器中的图形处理单元（GPU）。 这样可以大大提高性能，还可以减少移动设备上的资源消耗。

帧率。

没有踪迹。？！？

重排/重涂

可能的结果是，在屏幕上进行动画处理的对象在发生动画时不需要页面的单个“重新布局”。 由于CSS过渡由浏览器管理，因此可以大大提高其动画的保真度，并且在许多情况下可以加速硬件。

在开发工具中重画。

仅重涂。

FPS柜台

为此，只需在Chrome中输入“ chrome：flags”，向下滚动至FPS计数器，然后启用它，然后点击屏幕底部的立即重新启动按钮即可。 启用它之后，您应该能够看到窗口左上角显示的FPS速率，表明该页面确实是GPU加速的。

那么我们使用Scale还是Scale3d？

参见scale与scale3d的示例： https ：//jsfiddle.net/Hw6AM/2/

开发工具中的Scale3D框架。

三次贝塞尔曲线和时序函数

对于3D动画，贝塞尔曲线通常用于定义3D路径以及用于关键帧插值的2D曲线。 本质上是缓动函数，它通过设置从比率得出的固定css坐标点来控制动画的速度。

-webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
-ms-transition: -ms-transform .2s ease-in-out;
transition: transform .2s ease-in-out;

与上面的示例相同，但是速度曲线是使用三次贝塞尔函数指定的：

-webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
   -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    -ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
     -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
        transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */

有关计时功能的更多信息，请参见Mozila计时功能。

定时功能–更多示例

煎饼定理！ 令人惊叹的CSS3过渡效果竞速（悬停在轨迹上方）

Google CSS3用三次方贝塞尔曲线旋转。

CSS3过渡控件属性

让我们看一下CSS3过渡控件的一些属性以及使用它们的任何限制。

-webkit-backface-visibility: hidden;

有用，请注意，Chrome默认将背面显示为可见。 阅读有关CSS技巧背面可见性的更多信息 。

-webkit-perspective: 1000;

效果不太好，仅受Chrome和Safari支持。 阅读有关W3 CSS3透视图的更多信息。

-webkit-font-smoothing: subpixel-antialiased;

对于那些正在开发以野生动物园为目标的人很有趣。 阅读有关maxvoltar字体平滑的更多信息。

-webkit-transform-style: preserve-3d;

酷效果查看转换样式演示 。

useTranslate3d: true;

谷歌表示：“将useTranslate3d选项设置为true，以使iDevices上的动画更流畅（硬件加速）。” 阅读更多关于CSS Animatable Properties的信息 。

资源和进一步阅读

HTML5加速发展。

jQuery Animate增强。

保罗·爱尔兰（Paul Irish）on requestAnimationFrame。

高级动画演示（使用原型）。

关于CSS转换的很酷的文章。

GPU CSS。

三次贝塞尔曲线缓解工具。

From: https://www.sitepoint.com/css3-pevent-flickr-trails/