css - 如何使用关键帧上下移动图像

Question

我希望我的图像以 top:0 开始，以 bottom:0 结束，动画流畅。我正在努力寻找解决方案。

非常清楚，我不能将背景图片用于 SEO 目的。也欢迎 JS 解决方案。

.element {
  height: 200px;
  width: 400px;
  background-color: red;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.element img {
  animation: nudge 5s linear infinite alternate;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes nudge {
  0%, 100% {
    top: 0;
    bottom: auto;
  }

  50% {
    bottom: 0%;
    top: auto;
  }
}

<div class="element">
  <img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>

Answer 1

与其尝试在顶部和底部设置动画，不如在 translateY 上设置动画并使用顶部将其向下移动，这样它就不会离开屏幕

.element {
  height: 200px;
  width: 400px;
  background-color: red;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.element img {
  animation: nudge 2s linear infinite alternate;
  position: absolute;
  top: 0;
  transform: translateY(0);
}

@keyframes nudge {
  100% {
    transform: translateY(-100%);
    top: 100%;
  }
}

<div class="element"><img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>