CSS 动画一站式指南( 七 ) _生活百科

设置新图层通常有以下两种方式：

将节点设置为 <video> 或 <iframe>
为节点添加 will-change

4.7 开启 GPU 硬件加速模式为节点声明 transform:translate3d()或transform:translateZ() ，这两个声明都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，实现硬件加速。
transform:translate3d()和transform:translateZ() 其实是为了渲染3D样式，但声明为 0后并无真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。在 Webkit内核 下使用 transform:translate3d()加速效果会更明显。
CSS 性能优化的方法还有很多很多，这里就不一一列举了，感兴趣的同学可以自行学习一哈。
5. 总结本文主要讲了 CSS 动画方面的知识并给出了一些简单的实践以及一些性能上的优化方法，希望通过本文可以帮助你对 CSS 动画有一个简单的认识并能上手一些简单的动画。
虽然在 CSS3 中引入三大交互属性后，让 CSS 也能实现一些比较复杂的动画了，但是不得不承认 CSS 可以实现的动画效果还是非常有限。
不过好在业界还有很多可以实现动画的方案，例如 canvas，three.js ， zrender，d3 等等，提到动画一般还会联想到数据可视化这个领域，数据可视化的应用在我们日常工作和生活中随处可见，例如前端监控平台上的各种绘图，某些网站上各种商品的 3D 展示等等，如果对数据可视化的方向比较感兴趣也可以研究学习一哈，很有趣的一个方向。
【CSS 动画一站式指南】