CSS3動畫：頂部移動的圖像底部

Question

問過類似的問題，這個昨天，在Zeaklous幫了我與製作動畫水無縫移動從左到右工作一個很好的答案。

，所以我嘗試着將同樣的事情到圖像頂部移到底部無縫連接，用同樣的方法將工作思路，但我覺得我在想念的東西。

的HTML是：

<div id="waterfall"></div> 

的CSS是：

#waterfall { 
background: url(img/waterfall.png); 
background-repeat: no-repeat; 
width: 100%; 
height: 1200px; 
position: absolute; 
top: 1150px; 
right: 870px; 
z-index: 5; 
-webkit-transition: flow 3s ease-out; 
    -moz-transition: flow 3s ease-out; 
    -o-transition: flow 3s ease-out; 
    transition: flow 3s ease-out; 

animation: flow 2000s linear infinite; 
} 

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

有一些問題，當我做出的寬度一組×45像素，不能得到任何動畫工作。所以我把它設置爲100％，但它然後就消失了，我再也找不到了。

如果我改變的動畫水平，它的工作原理，但只有與寬度：100％，那一刻我試圖使它的垂直運動是不會工作。

我失去了什麼這裏是垂直的動畫有什麼不同？

任何幫助，非常感謝。

Answer 1

我相信很多你遇到的問題與background-repeat: no-repeat;做。動畫設置的方式，它使用重複來創建流程。當你打開no-repeat時，它將中斷流量（因爲它依賴於圖像重複）。您的代碼的Here is a demo只需將此線取出，並修復％flow（向下滾動以查看由於您的絕對定位而導致的動畫）。你現在可以看到它的作用，我不知道你最終希望它看起來如何。

應該沒有問題，從水平的動畫將其更改爲垂直的動畫，通過展示不同的兩種效果這一新的演示所看到。我所做的只是在after動畫切換x和y的值：如果你把background-repeat: no-repeat;回你可以看到這個問題它創建

編輯你的問題促使我開始嘗試做一些跌如瀑布http://cssdeck.com/labs/mjsrldib但仍像你的水元素一樣橫向移動。 Here is what I came up with在我工作的短時間內。它可以證明有用