前端性能优化：尽可能使用CSS动画

比眉伴天荒 2022-10-02 01:57 159阅读 0赞

日期：2013-7-4  来源：[GBin1.com][]

[![前端性能优化：尽可能使用CSS动画][CSS]][CSS_CSS]

网站设计对美观特性和可配置元素动画的大量需求，使得一些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动画逻辑：

在上例中，ie-animations.js文件必须包含你自定义的jQuery代码，用于当CSS动画在早期IE中不被支持的情况下，来替代CSS动画完成动画效果。完美的通过CSS动画来优化动画，通过JavaScript来支持全局动画效果。

在下一篇中，我们将介绍[事件委托][Link 1]。关于CSS动画的介绍，可以参考精品教程的[CSS3系列教程之动画][CSS3]。

相关阅读：

*  [前端性能优化：DocumentFragments或innerHTML取代复杂的元素注入][DocumentFragments_innerHTML]
 *  [前端性能优化：高频执行事件/方法的防抖][Link 2]
 *  [前端性能优化：网络存储的静态缓存和非必要内容优化][Link 3]
 *  [前端性能优化：使用异步加载，延迟加载依赖][Link 4]
 *  [前端性能优化：使用Array.prototype.join代替字符串连接][Array.prototype.join]

via [极客社区][Link 5]

### 来源：[前端性能优化：尽可能使用CSS动画][GBin1.com] ###

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130704-front-end-performance-optimization-6/
[CSS]: http://www.gbin1.com/technology/javascript/20130704-front-end-performance-optimization-6/title.jpg
[CSS_CSS]: http://www.gbin1.com/technology/javascript/20130704-front-end-performance-optimization-6/index.html
[Link 1]: http://www.gbtags.com/gb/share/1400.htm
[CSS3]: http://www.gbtags.com/gb/share/992.htm
[DocumentFragments_innerHTML]: http://www.gbin1.com/technology/javascript/20130619-front-end-performance-optimization-1/index.html
[Link 2]: http://www.gbin1.com/technology/javascript/20130618-front-end-performance-optimization-2/
[Link 3]: http://www.gbin1.com/technology/javascript/20130628-front-end-performance-optimization-3/
[Link 4]: http://www.gbin1.com/technology/javascript/20130701-front-end-performance-optimization-4/
[Array.prototype.join]: http://www.gbin1.com/technology/javascript/20130703-front-end-performance-optimization-5/index.html
[Link 5]: http://www.gbtags.com/gb/share/1374.htm