滑らかな結果（サブピクセルアニメーション）で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/tale-of-animation-performance/

：このページの翻訳（）の例で見ることができた後、私はアニメーションのhttp://css-tricks.com/parallax-background-css3/

滑らか：私の現在の例は、このページのコード例から作られましたバックグラウンドポジションで行うことができますが、複数のdivを持つ繰り返しの背景を偽って翻訳を使用して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; 
}