首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

前端性能优化:尽量使用CSS动画

2013-07-09 
前端性能优化:尽可能使用CSS动画网站设计对美观特性和可配置元素动画的大量需求,使得一些JavaScript类库,

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

网站设计对美观特性和可配置元素动画的大量需求,使得一些JavaScript类库,如jQuery,MooTools大量的被使用。尽管现在浏览器支持CSS的transformationkeyframe所 做的动画,现在仍有很多人使用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动画

热点排行