Javascript 反应JS和CSS，向上滚动数据库中的所有文本注释

我正在尝试使用React、CSS和Firebase构建一篇带有评论的帖子。 我这篇文章有10条评论。现在我想制作动画，向上滚动评论，而不是显示所有10条评论

第一部分是我的React JS代码

{
comments.map（（comment）=>(

{comment.text}

))
}

第二部分是我的CSS代码：

。向上滚动{
最大高度：100px；
溢出：隐藏；
位置：相对位置；
}
.向上滚动p{
位置：相对位置；
宽度：100%；
身高：100%；
保证金：0；
转化：translateY（100%）；
动画：向上滚动3s线性无限；
}
@关键帧向上滚动{
0%   { 
转化：translateY（100%）；
}
100% { 
转换：translateY（-100%）；
}
}

如果只有一条注释，动画效果良好。评论将向上滚动3秒钟并重复。问题是：如果有超过1条评论，那么所有评论都会一起显示，并且彼此重叠，并向上滚动3秒钟

我的问题是，如何让评论一个接一个地向上滚动

编辑：我接受了algo_用户的建议，更改。向上滚动p位置到相对位置。但现在它显示了所有评论，向上滚动3秒钟，然后重复。对于所有10条评论，3秒钟只显示前4或5条。我的新问题是，有些帖子可能有1条评论，有些帖子可能有10条评论，我如何以相同的速度滚动所有评论？

根据w3学校： 位置：绝对；->该元素相对于其第一个定位（非静态）的祖先元素进行定位

因此，如果您将“.scroll up p”的位置属性更改为initial/relative，甚至只是将其删除，那么应该可以正常工作

---

您可以在此处阅读有关此属性的更多信息：

您是否有可能提供一个最小的可复制示例，也许是CodeSandbox？谢谢，我可以继续接受您的建议，但现在我有一个新问题。