How to animate these p elements with .bottom-style-p class, so that it transitions from 1 / 8 to 2 / 8 and so on smoothly

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

The problem with your code lies in the animation time, in fact 10 seconds means that the number will disappear after 10 seconds as you wrote pFadeIn.

Furthermore, if you want '\ 8' not to disappear, set the animation time asynchronously with respect to the appearance of the text.

I did it this way:

.bottom-style-p {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        animation: pFadeIn 3s ease-in;
    }

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

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

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

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

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

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

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

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

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

I turned the fadeIn into a fadeOut. Setting 30% helps you adjust the fade, if you set 90% you will have a much faster fadeout, but the animation will always last 30 seconds.

If, however, you adjust the animation time to 2 seconds you will also have '\8' which will flash, in which case I advise you to divide the text to be animated from the one which must remain fixed.