本文主要是介绍前端性能优化：尽可能使用CSS动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
日期：2013-7-4 来源：GBin1.com
网站设计对美观特性和可配置元素动画的大量需求，使得一些JavaScript类库，如jQuery，MooTools大量的被使用。尽管现在浏览器支持CSS的transformation和keyframe所 做的动画，现在仍有很多人使用JavaScript制作动画效果，但是实际上使用CSS动画比起JavaScript驱动的动画效率更高。CSS动画同时 需要更少的代码。很多的CSS动画是用GPU处理的，因此动画本身很流畅，当然你可以使用下面这个简单的CSS强制使你的硬件加速：
.myAnimation {animation: someAnimation 1s;transform: translate3d(0, 0, 0); /* 强制硬件加速 */
}
tansform:transform(0,0,0)在不会影响其他动画的同时将通话送入硬件加速。在不支持CSS动画的情况下（IE8及以下版本的浏览器），你可以引入JavaScript动画逻辑：
<!--[if 低于IE8版本]> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="/js/ie-animations.js"></script> <![endif]-->
在上例中，ie-animations.js文件必须包含你自定义的jQuery代码，用于当CSS动画在早期IE中不被支持的情况下，来替代CSS动画完成动画效果。完美的通过CSS动画来优化动画，通过JavaScript来支持全局动画效果。
在下一篇中，我们将介绍事件委托。关于CSS动画的介绍，可以参考精品教程的CSS3系列教程之动画。
相关阅读：
- 前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入
- 前端性能优化：高频执行事件/方法的防抖
- 前端性能优化：网络存储的静态缓存和非必要内容优化
- 前端性能优化：使用异步加载，延迟加载依赖
- 前端性能优化：使用Array.prototype.join代替字符串连接
via 极客社区
来源：前端性能优化：尽可能使用CSS动画
这篇关于前端性能优化：尽可能使用CSS动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
