通过调整 CSS 动画关键帧，将 `@keyframes` 定义为单向线性位移（0% → 100%），配合 `animation: slide 9s linear infinite`，即可让元素持续向下移动并在触底后无缝回到顶部，避免反弹效果。
要实现图像组无限向下平滑滑动 + 触底自动重置到顶部（而非“弹回”或“折返”），核心在于：动画必须是单向、非对称、且终点与起点形成视觉闭环。你原代码中 0%, 100% { transform: translateY(0); } 和 50% { translateY(500px); } 构成了一个“下→上”的往返路径（即先下后上），这就是反弹的根源。
✅ 正确做法是定义一个纯单向位移动画，让元素从顶部出发，直线移动到底部指定位置，然后立即跳回起点继续下一循环——由于 animation-timing-function: linear 且无中间反向帧，人眼感知为流畅连续下滑。
以下是优化后的完整方案：
.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;
top: 0; /* 推荐用 top 替代 bottom，语义更清晰 */
}
@keyframes slide {
0% {
transform: translateY(-100%); /* 起始：完全在容器上方，隐藏 */
}
100% {
transform: translateY(750px); /* 终点：完全滑出容器底部（等于容器高度） */
}
}? 为什么这样更健壮？
- translateY(-100%) 确保动画起始时元素完全不可见（从顶部外进入），避免首帧闪现；
- translateY(750px)（或 translateY(100vh)）使元素彻底滑出视口底部，之后浏览器会立即跳回 -100%，因 overflow: hidden 存在，用户看不到重置过程，形成无缝循环；
- 移除 50% 停顿点，杜绝任何反向运动可能。
⚠️ 注意事项：
- 动画时长（如 9s）需根据内容高度与容器尺寸微调，确保滑动节奏自然；
- 若 .object 内容高度 > 容器高度，建议添加 white-space: nowrap 和 display: inline-block 防止换行干扰位移；
- 在移动端需添加 -webkit-animation 前缀以兼容旧版 Safari；
- 如需更精细控制（如多行错落滚动），可改用 @property + scroll-driven animations 或 JavaScript 驱动，但本例纯 CSS 已足够高效。
总结：消除反弹 = 摒弃对称关键帧，采用单向位移 + 容器裁剪 + 线性时序。只需修改 @keyframes 为两帧定义，并确保 overflow: hidden，即可获得专业级无限下滑效果。
