如何实现元素持续向下滑动触底后从顶部重启而非回弹

你的问题在于当前动画是往返滑动（滑到中间再回弹），要实现触底后直接从顶部重启的单向循环效果，只需修改动画关键帧，让元素持续向下滑动，动画结束时瞬间回到初始位置即可。

修改后的CSS代码 #

.box-buttons { 
  width:70%;
  height:750px;
  background-color:grey;
  float:left;
  margin: 30px 3%;
  border: 1px solid black;
  overflow:hidden; /* 隐藏容器外的内容 */
}

.object {
  animation: slide 9s linear infinite;
  position: relative;
  left: 0;
  top: 0; /* 调整为top初始定位，更直观 */
}

@keyframes slide {
  0% {
    transform: translateY(0); /* 初始位置：元素顶部对齐容器顶部 */
  }
  100% {
    transform: translateY(750px); /* 滑动到元素顶部对齐容器底部（容器高度为750px） */
  }
}

原理说明 #

• 移除原动画中50%的回弹关键帧，改为从0%到100%持续向下滑动，移动距离等于容器高度（750px）。
• 由于animation设置为linear infinite，动画结束时会瞬间跳回初始位置，视觉上就呈现为元素触底后直接从顶部重新开始滑动的效果。
• 容器的overflow:hidden属性确保滑动出容器的内容被隐藏，避免出现滚动条或多余内容。

内容的提问来源于stack exchange，提问作者4hire00