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上进行动画处理，而不是尝试在顶部和底部进行动画处理，并使其与顶部一起向下移动，这样它就不会离开屏幕

s = set()
for i in output['all_paths']: # start here
    for j in i['path']:       # this line next in comprehension
        j.get('to')           # the result goes to the front
        s.add(j)

.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%;
  }
}

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

1 个答案: