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 to时，出现了一些问题，无法使任何动画工作。所以我把它设为100%，但是它消失了，我再也找不到它了。

如果我将动画改为水平动画，它可以工作，但只在宽度:100%，我试着使它垂直运动的那一刻是行不通的。

我在这里遗漏了什么，垂直动画的不同之处？

任何帮助都是非常感谢的。

Answer 1

我相信大部分问题都与background-repeat: no-repeat;有关。动画的设置方式是，它使用重复来创建流。当您打开no-repeat时，它将停止到期的流(因为它依赖于图像的重复)。这是一个演示的代码与简单的这一行取出和%在flow固定(滚动看到动画由于您的绝对定位)。你可以看到它现在做了什么，我不知道你到底想让它看起来怎样。

不应该有任何问题改变它从水平动画到垂直动画，正如这个新的演示显示这两个效果分开。我所做的就是切换after动画中的x和y值：http://cssdeck.com/labs/mjsrldib --如果您将background-repeat: no-repeat;放回其中，您可以看到它造成的问题。

编辑你的问题促使我尝试做一些像瀑布一样的东西，但仍然像你的水元素那样横向移动。这是我想出来的在很短的时间内我就开始研究它了。它可能会被证明是有用的