Content disappear on scroll like I want but then reappears later down the website, I don’t want it to reappear again

Tried making a on scroll animation and expected for the object to animate on scroll and not appear again on scroll. The animation and everything is working perfectly fine but its just after the animation that the problem occurs

This is the before scroll animation

This is after scroll animation, I don’t want the “scroll down” text to appear anymore after scrolling down

Here’s the css code for the scrolldown animation:

.scrolldown{
position: fixed;
font-size: 10px;
font-weight: 600;
left:45px;
writing-mode: vertical-lr;
height: 200px;
bottom:0;
color: rgba(129, 128, 128, 0.5);
text-transform: uppercase;
letter-spacing: 2px;
z-index: -1;
width: 30px;
line-height: 30px;
animation: scroll-in 1.2s;
animation-timing-function: ease-in-out;
&::after{
    content:"";
    display: block;
    position: absolute;
  
    width: 1px;
    background-color: rgba(62, 51, 49,0.5);
    opacity:0;
    bottom:0px;
    left:15px;
    animation: scroll-in 1.8s;
    animation-timing-function: ease-in-out;

    }
}