如何实现无可见循环重启的向上滚动动画，保留部分前置文本可见？

• 核心目标：用JavaScript + CSS实现无可见循环断点的无限垂直滚动效果（类似垂直跑马灯）
• 数据源：来自CMS的词列表，词的数量会动态变化
• 现状：自行修改样式后有初步进展，但仍未达到预期效果，对CSS动画的逻辑理解有障碍，寻求帮助，可接受调整HTML结构

已尝试的样式修改 #

我调整了.slider-item的以下样式，但效果仍不达标：

.slider-item {
  opacity: 0.5; /* 增加透明度，让过渡过程中能看到上一个元素 */
  transform: translateY(-100%); /* 修改滚动方向 */
}

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