React JS and CSS, scroll up all text comments from database

Question

I'm trying to build a post with comments using React, CSS, and Firebase. I have this post with 10 comments. Now I want to build animation to scroll up the comments, instead of showing all the 10 comments.

First part is my React JS code.

<div className="scroll-up">
    {
        comments.map((comment) => (
            <p>
                {comment.text}
            </p>
        ))
    }
</div>

The second part is my CSS code:

.scroll-up {
    max-height: 100px;
    overflow: hidden;
    position: relative;
}

.scroll-up p {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    transform:translateY(100%);
    animation: scroll-up 3s linear infinite;
}

@keyframes scroll-up {
    0%   { 
        transform: translateY(100%);        
    }
    100% { 
        transform: translateY(-100%); 
    }
}

The animation works fine if there is only one comment. The comment will scroll up for 3 seconds and repeat. The problem is: if there is more than 1 comment, ALL comments will show up together, on top of each other, and scroll up for 3 seconds.

My question is, how do I let the comments scroll up one by one?

Edit: I took the advice from algo_user, change .scroll-up p position to relative. But now it's showing all comments, scroll up for 3 seconds and repeat. For all 10 comments, 3 seconds only showed the first 4 or 5. My new question is, some post may have 1 comment, some may have 10 comments, how do I scroll them at the same speed, for all comments?

Answer 1

According to w3 School : position: absolute; -> The element is positioned relative to its first positioned (not static) ancestor element

So, If you change the position property of ".scroll-up p" to initial/relative or even just remove it, then that should work.

You can read more about this property here: https://www.w3schools.com/cssref/pr_class_position.asp