本文讲解如何使用 css 动画让图片组持续向下匀速滑动，并在触达容器底部后立即重置到顶部，避免回弹或停顿，实现真正的无限循环下滑效果。
要实现“无限向下滑动 + 到底即回顶”的流畅循环效果，关键在于动画逻辑的重构：必须摒弃 0% 和 100% 均设为 translateY(0)（或对称位移）的往返式写法，否则浏览器会自动补间形成“下→上→下”的反弹行为。正确做法是让动画单向位移，并在终点精确匹配起始位置的视觉状态，从而借助 infinite 实现无缝衔接。
✅ 正确的动画定义
将 @keyframes 改为严格单向位移：
@keyframes slide {
0% {
transform: translateY(0);
}
100% {
transform: translateY(500px); /* 向下移动固定距离 */
}
}⚠️ 注意：500px 应根据 .box-buttons 的实际高度（当前为 750px）及 .object 内容高度合理设定。理想情况下，位移量 ≥ 容器可视高度，确保元素完全移出视口；但不宜过大，否则动画时间拉长、首帧等待明显。推荐设为 750px 或略高（如 800px），并与动画时长协同调整。
✅ 配套 CSS 调整建议
.box-buttons {
width: 70%;
height: 750px;
background-color: grey;
float: left;
margin: 30px 3%;
border: 1px solid black;
overflow: hidden; /* 关键：隐藏超出区域 */
position: relative; /* 为内部绝对定位提供参考 */
}
.object {
animation: slide 9s linear infinite;
position: relative;
/* 移除 bottom: 0 —— 由 translateY 精确控制垂直位置 */
/* left: 0 可保留，若需水平居中可改用 margin: 0 auto; display: block; */
}? 为什么原写法会“反弹”？
原代码中：
0%, 100% { transform: translateY(0); }
50% { transform: translateY(500px); }这定义了一个 先下后上 的对称动画（0%→50%↓，50%→100%↑）。即使视觉上“像在往下走”，实则第 9 秒末会强制返回起点，造成明显的向上回跳感——这不是“循环下滑”，而是“振荡下滑”。
而新写法 0%→100% 单向位移，配合 infinite，浏览器会在第 9 秒末瞬间跳回 0% 状态（即 translateY(0)），只要位移量足够覆盖容器高度，人眼就感知为“一个元素滑出底部 → 下一个相同元素从顶部进入”，形成视觉连续的无限流。
? 进阶提示：提升真实感与性能
-
无缝衔接增强：若 .object 内容高度 > 容器高度，可复制一份 DOM（如 ......），用两个相同动画错开 50% 时长（animation-delay: -4.5s），彻底消除切换间隙。
- 性能优化：添加 will-change: transform; 到 .object，启用 GPU 加速。
- 响应式适配：使用 vh 单位替代固定像素（如 transform: translateY(100vh)），使位移量随视口自适应。
通过以上调整，你的图片组将真正实现静音、匀速、无抖动的无限向下滚动效果，适用于数字标牌、信息流横幅等场景。
