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) } 
}