CSS動畫背景，地位與流暢的效果（子像素動畫）

Question

我試圖動畫一個div的背景位置，慢慢地，但不必急動它。你可以看到我這裏目前努力的結果：

http://jsfiddle.net/5pVr4/2/

@-webkit-keyframes MOVE-BG { 
    from { 
     background-position: 0% 0% 
    } 
    to { 
     background-position: 187% 0% 
    } 
} 

#content { 
    width: 100%; 
    height: 300px; 
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; 
    text-align: center; 
    font-size: 26px; 
    color: #000; 

    -webkit-animation-name: MOVE-BG; 
    -webkit-animation-duration: 100s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
} 

我一直在這幾個小時，也找不到任何將緩慢平滑的動畫在子像素級別。我現在的例子來自示例代碼此頁面上進行：http://css-tricks.com/parallax-background-css3/

動畫的平滑度可以在此頁面的翻譯（）的例子可以看出以後我：

http://css-tricks.com/tale-of-animation-performance/

如果可以」不要用背景位置來完成，有沒有辦法用多個div來僞造重複背景並使用translate來移動這些div？

Answer 1

結帳這個例子：

http://jsfiddle.net/5pVr4/4/

<div id="content">Foreground content 
    <div class="bg"></div> 
</div> 

@-webkit-keyframes MOVE-BG { 
    from { 
    -webkit-transform: translateX(0); 
    } 
    to { 
    -webkit-transform: translateX(-187%); 
    } 
} 

#content { 
    height: 300px; 
    text-align: center; 
    font-size: 26px; 
    color: #000; 
    position:relative; 
} 

.bg{ 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    z-index: -1; 
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; 

    -webkit-animation-name: MOVE-BG; 
    -webkit-animation-duration: 100s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
} 

Answer 2

你應該調整你的HTML和CSS點點

Working Demo

HTML

<div id="wrapper"> 
    <div id="page"> 
    Foreground content 
</div> 

<div id="content"> </div> 
</div> 

CSS

@-webkit-keyframes MOVE-BG { 
    from { left: 0; } 
    to { left: -2000px; } 
} 

#wrapper { 
    position:relative; 
    width:800px; 
    height: 300px; 
    overflow:hidden; 
} 

#page { 
    text-align: center; 
    font-size: 26px; 
    color: #000; 
} 

#content { 
    width: 2000px; 
    height: 300px; 
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; 
    position:absolute; 
    top: 0; 
    left: 0; 
    z-index:-1; 
    -webkit-animation-name: MOVE-BG; 
    -webkit-animation-duration: 100s; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
} 

Answer 3

動畫背景位置會造成一些性能問題。瀏覽器將以更便宜的方式動畫變換屬性，包括翻譯。

這裏使用一個例子翻譯爲無限幻燈片動畫（無前綴）：

http://jsfiddle.net/brunomuller/5pVr4/504/

@-webkit-keyframes bg-slide { 
    from { transform: translateX(0); } 
    to { transform: translateX(-50%); } 
} 

.wrapper { 
    position:relative; 
    width:400px; 
    height: 300px; 
    overflow:hidden; 
} 

.content { 
    position: relative; 
    text-align: center; 
    font-size: 26px; 
    color: #000; 
} 

.bg { 
    width: 200%; 
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x; 
    position:absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    animation: bg-slide 20s linear infinite; 
}