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%;}
}

当我将宽度设置为45px时出现了一些问题，无法使任何动画工作。所以我把它设置为100％然后它就消失了，我再也找不到了。

如果我将动画更改为水平，它可以工作但只有宽度：100％，我尝试使它垂直移动的那一刻是不会工作的。

我在这里错过的是垂直动画的不同之处？

非常感谢任何帮助。

Answer 1

我相信你所遇到的很多问题都与background-repeat: no-repeat;有关。动画的设置方式，它使用重复来创建流程。当您启用no-repeat时，它会中止流量到期（因为它依赖于图像重复）。 Here is a demo您的代码只需取出此行并修复flow中的％（向下滚动以查看由于您的绝对定位而生成的动画）。你可以看到它现在做了什么，我不确定你最终想要它是什么样的。

从水平动画到垂直动画应该没有问题，正如这个新的演示所示，两个效果分开。我所做的只是切换after动画中的x和y值：http://cssdeck.com/labs/mjsrldib如果你重新放入background-repeat: no-repeat;，你可以看到它创建的问题

编辑你的问题促使我尝试制作像瀑布一样的东西，但仍像你的水元素一样向侧面移动。我在短时间内完成了Here is what I came up with。它可能会以某种方式证明是有用的

Css3动画：将图像从上到下移动

1 个答案: