scrolling background in one direction only

Question

All I want to have a background scrolling effect from bottom to top ,but I dont know how to do so.
I have tried it using CSS ,but the problem arises here is it scroll in both direction ie bottom to top and top to bottom.

 * { margin: 0; padding: 0; } div { width: 100vw; height: 100vh; animation: change 2s infinite ease-in both; background-image: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg); background-size: cover; background-repeat: no-repeat; } @keyframes change { 0%, 100% { background-position: 0% 5%; } 5% { background-position: 0% 10% } 10% { background-position: 0% 15% } 15% { background-position: 0% 20% } 20% { background-position: 0% 25% } 25% { background-position: 0% 30%; } 30% { background-position: 0% 35% } 35% { background-position: 0% 40% } 40% { background-position: 0% 45% } 45% { background-position: 0% 50% } } 

 <div> <h1> This is animating background ...</h1> </div> 

Answer 1

You can achieve that by just using the to and from attributes for the keyframes change. The effect is kind of weird, because the background top and bottom do not fit together...

 * { margin: 0; padding: 0; } div { width: 100vw; height: 100vh; animation: change 3s linear infinite; background-image: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg); background-size: cover; background-repeat: repeat-y; background-position: 0 0; } @keyframes change { from { background-position: 0 100vh; } to { background-position: 0 0; } } 

 <div> <h1> This is animating background ...</h1> </div>