css3動畫：無縫屏幕移動

Question

得到一點點堅持的東西，我有一個網站，我有水在底部，我希望它不斷從左到右移動，給它無縫流動的水的幻覺，類似的東西到這個網站上的什麼，除了沒有懸停狀態，只有水平。

http://www.priteshgupta.com/2011/07/filling-a-glass-with-water-using-html5/

的HTML我有一個簡單的空div標籤（一切是在CSS）

<div id="water"></div> 

和CSS是：

#water { 
    background: url(img/ocean.png); 
    margin-top: 1000px; 
    width: 100%; 
    height: 400px; 
    -webkit-transition: all 3s ease-out; 
    -moz-transition: all 3s ease-out; 
    -o-transition: all 3s ease-out; 
    transition: all 3s ease-out; 
    z-index: 3; 
    animation: water 2s linear infinite; 
} 

@keyframes water { 
    to {transform: translate(100px,0);} 
    from {transform: translate(0px,0);} 
} 

圖像看起來是這樣的： http://prntscr.com/1hwfnz

關於最佳做法的任何想法是什麼？ 任何幫助，非常感謝。 感謝

作爲一個方面說明我想這CSS：

#water { 
    background: url(img/ocean.png); 
    margin-top: 1000px; 
    width: 200%; 
    height: 400px; 
    margin-left:-100px; 
    -webkit-transition: all 3s ease-out; 
    -moz-transition: all 3s ease-out; 
    -o-transition: all 3s ease-out; 
    transition: all 3s ease-out; 
    z-index: 3; 
    animation: water 2s linear infinite; 
} 

@keyframes water { 
to {transform: translate(100px,0);} 
from {transform: translate(0px,0);} 
} 

我可以設置溢出隱藏x和應該解決的滾動發行，讓水流動，問題是，當水循環結束後會有一個難以跳回的開始。

Answer 1

如果應用過渡到只water，那麼你就可以清楚地看到你的動畫實際做 - 只是移動的整體形象權100像素，跳回到原來的位置，那麼它再次

你需要什麼有類似

#water { 
    background: url(http://i.imgur.com/Lrvw1oc.png); 
    /*margin-top: 1000px;*/ 
    width: 100%; 
    height: 200px; 
    -webkit-transition: water 3s ease-out; 
    -moz-transition: water 3s ease-out; 
    -o-transition: water 3s ease-out; 
    transition: water 3s ease-out; 
    z-index: 3; 
    animation: water 2000s linear infinite; 
} 

@keyframes water { 
    0% {background-position: 0 0;} 
    100% {background-position: 100000% 0;} 
} 

它移動的背景位置，而不是整個圖像。

Here is a demo

注意：2000年代和100,000％是周圍的工作，以防止「醜跳斬」的發生。這可能是我的實現可能會有點不對