jQuery vs CSS3：无限背景循环

Question

假设你有一个无限循环的背景图像，我发现使用CSS3这个简单的动画消耗高达50％的PC存储空间，这很不错，还没有用过jQuery虽然。

你有什么缺点？是否会消耗更少的PC内存？

这里是我的Webkit CSS3代码：

.stars_back { 
    background: url('stars.png') repeat; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -10; 
    -webkit-animation-name: star-back; -webkit-animation-duration: 1700s; 
    -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; 
} 
@-webkit-keyframes star-back { 
    from { background-position: 1000% 5% } 
    to { background-position: 5% 5% } 
} 

Answer 1

动画背景图片的效率不高，如果它的jQuery或CSS转换也没关系。我建议你添加一个包含背景图像的额外元素以应用硬件加速：

.stars_back { 
    /* right: 100% forces the div to be twice the intended width, parent should have overflow: hidden */ 
    background: url('stars.png') repeat; position: absolute; top: 0; left: 0; right: 100%; bottom: 0; z-index: -10; 
    -webkit-animation-name: star-back; -webkit-animation-duration: 1700s; 
    -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; 
} 
@-webkit-keyframes star-back { 
    /* translate3d(-50%,0,0) puts the second half of the div in the viewport and then repeats*/ 
    from { -webkit-transform: translate3d(0,0,0) } 
    to { -webkit-transform: translate3d(-50%,0,0) } 
}