Css3 Animation: Moving Images Top to Bottom


Asked a similar question to this yesterday, where Zeaklous helped me out with a good answer that worked for animating water moving seamlessly left to right.

so i tried to apply the same thing to a image moving top to bottom seamlessly, thought using the same method would work but i feel like im missing something.

the html is:

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

the css is:

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

had some problems when i made the width a set 45px, cant get any animations to work. so i set it to 100% but then it just disappears and i cant find it again.

if i change the animation to horizontal, it works but only with width:100%, the moment i try make it vertical movement is wont work.

what am i missing here that is different for vertical animations?

any help is greatly appreciated.

Problem courtesy of: Nicholas Ritson


I believe much of the issue you're having has to do with background-repeat: no-repeat;. The way the animation is set up, it uses repeats to create the flow. When you have no-repeat on, it discontinues the flow due (because it relies on the image repeating). Here is a demo of your code with simply this line taken out and the % in flow fixed (scroll down to see the animation due to your absolute positioning). You can see what it does now, I'm not sure how you want it to look in the end.

There should be no issue changing it from horizontal animation to vertical animation, as seen by this new demo showing both effects separate. All I did was switch the x and y values in the after animation: http://cssdeck.com/labs/mjsrldib If you put background-repeat: no-repeat; back in you can see the problem it creates

EDIT your question prompted me to try and make something that fell like a waterfall but still moved sideways like your water element. Here is what I came up with in the short time I worked on it. It could prove useful somehow

Solution courtesy of: Zach Saucier


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.