仅向一个方向滚动背景

Question

我想从底部到顶部都有背景滚动效果，但我不知道该怎么做。
我用CSS尝试过，但问题出在这里是向两个方向滚动，即底部从顶部到顶部到底部。

＆＃13;

＆＃13;

* {
  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%
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需使用关键帧更改的to和from属性即可实现此目的。效果有点奇怪，因为背景顶部和底部不适合在一起......

＆＃13;

＆＃13;

* {
  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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;