通过GPU来优化CSS 2D动画效果

电脑设备通过GPU来支持CSS 3D的转换线程。GPU是一个专门用于像素操作的电子设备。GPU通常用于处理游戏、本地应用程序和3D动画，而不是用于页面的2D transforms。当前的浏览器依靠CPU来支持2D动画，这会影响在所有平台下CSS动画的平滑性和流畅性，尤其是在移动设备上。

我们可以通过一些小技巧来使用将GPU使用在2D动画上。下面是一个例子，试试用鼠标移动到下面的图片上看看。

div#vintage-racers { 
    width: 33%; 
    position: relative; 
    overflow: hidden; 
    border: 2px solid #000; 
    font-size: 0; 
    height: 300px; 
}
div#vintage-racers img { 
    position: absolute; 
    left: 0; 
    transition: 1s all ease-in-out; 
}
div#vintage-racers:hover img { 
    left: -100%; 
}                               
                            

当鼠标滑过div时图片开始移动，你会看到结果有一些延迟和画面抖动。为了制作平滑的动画效果，我们可以添加一个CSS 3D transform。这里的诀窍是在transform不会改变元素的外观，我们只是需要简单的包含3d transform来打开GPU功能，这将使得2D transition 也会被GPU影响。

div#vintage-racers img { 
    position: absolute; 
    left: 0; 
    transition: 1s left ease-in-out; 
    transform: translate3d(0,0,0); 
}                                
                            

效果如右边的图像所示：

如果你的电脑足够好，你会看到第二种动画效果要比第一种动画效果要平滑顺畅得多。如果你想知道GPU是否在工作，Chrome有一个实验性的工具可以检测你的动画的性能，使用方法如下：

1. 在Chrome的URL栏键入：about:flags。
2. 找到FPS Counter，点击enable来启用它。
3. 重启Chrome浏览器。

在页面渲染时如果GPU被启用，浏览器上将会出现FPS计数器。你可以将代码中的3D transform移除掉看看FPS计数器是否还会出现。

这个技术的可能有利于移动设备上的小CSS动画。但是使用这个技术要注意，智能手机和平板电脑的显存都相对比较小，所以测试非常重要，如果你发现这个技术可以在桌面设备上很好的运行，而在移动设备上不行，你可以通过@media query来在移动设备上关闭它。

@media only screen and (max-device-width: 1024px) {
    div#vintage-racers img { transform: none; }
}