html - 仅在一个方向滚动背景

Question

所有我想有一个从底部到顶部的背景滚动效果，但我不知道该怎么做。
我已经使用 CSS 尝试过，但是这里出现的问题是它在两个方向滚动，即底部从上到下。

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

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

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