Css3 Animation: Moving Images Top to Bottom

csscss-animations

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.

Best Answer

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

Related Solutions

Html – How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It's just not pretty.

Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.

Example: Can you do this HTML layout without using tables?

Css – How to combine a background-image and CSS3 gradient on the same element

Multiple backgrounds!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

These 2 lines are the fallback for any browser that doesn't do gradients. See notes for stacking images only IE < 9 below.

Line 1 sets a flat background color.
Line 2 sets the background image fallback.

The final line sets a background image and gradient for browsers that can handle them.

Line 3 is for all relatively modern browsers.

Nearly all current browsers have support for multiple background images and css backgrounds. See http://caniuse.com/#feat=css-gradients for browser support. For a good post on why you don't need multiple browser prefixes, see http://codepen.io/thebabydino/full/pjxVWp/

Layer Stack

It should be noted that the first defined image will be topmost in the stack. In this case, the image is on TOP of the gradient.

For more information about background layering see http://www.w3.org/TR/css3-background/#layering.

Stacking images ONLY (no gradients in the declaration) For IE < 9

IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Background position, sizing etc.

Other properties that would apply to a single image may also be comma separated. If only 1 value is supplied, that will be applied to all stacked images including the gradient. background-size: 40px; will constrain both the image and the gradient to 40px height and width. However using background-size: 40px, cover; will make the image 40px and the gradient will cover the element. To only apply a setting to one image, set the default for the other: background-position: 50%, 0 0; or for browsers that support it use initial: background-position: 50%, initial;

You may also use the background shorthand, however this removes the fallback color and image.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

The same applies to background-position, background-repeat, etc.

Best Answer

Related Solutions

Html – How to align content of a div to the bottom

Css – How to combine a background-image and CSS3 gradient on the same element

Related Topic