I want to be able to animate only using HTML and CSS so that the p elements that are ontop of each other appear one by one then reset

HTML:
<div class="bottom-style">
            <p class="bottom-style-p">1 / 8</p>
            <p class="bottom-style-p">2 / 8</p>
            <p class="bottom-style-p">3 / 8</p>
            <p class="bottom-style-p">4 / 8</p>
            <p class="bottom-style-p">5 / 8</p>
            <p class="bottom-style-p">6 / 8</p>
            <p class="bottom-style-p">7 / 8</p>
            <p class="bottom-style-p">8 / 8</p>
</div>

CSS:
.bottom-style-p{
    position: absolute;
    top: 96%;
    opacity: 0;
    animation: pFadeIn both ease-in 10s;
}

@keyframes pFadeIn{
    0%{
        opacity: 0;
    } 50%{
        opacity: 1;
    } 100% {
        opacity: 0;
    }
}

.bottom-style-p:nth-child(1){
    animation-delay: 2;
}

.bottom-style-p:nth-child(2){
    animation-delay: 4s;
}

// And so on

I already tried with the previous code shown above but the p still appear on top of eachother at the same time even after a big delay like 20seconds