Difficulty to complete slide animation

Question

Speaks friends,

I am trying to make a slide using animations with the opacity property. I want the first photo to be the starting point and not suffer from the effect of animation, then I set None to the same. Besides, I put a animation-delay so that each photo gets the effect at the right time. But obviously this extends the duration of the effect, which should have a total of only 25 seconds (5 seconds per photo). I’m having a hard time understanding the logic of keyframes, it’s the first time I’ve tried to reproduce something like that. Follow the CSS code:

@keyframes carrossel {

    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    40% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    60% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    80% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
}

.banner:nth-child(1) {
    animation: none;
}

.banner:nth-child(2) {
    animation-delay: 5s;
    opacity: 0;
}

.banner:nth-child(3) {
    animation-delay: 10s;
    opacity: 0;
}

.banner:nth-child(4) {
    animation-delay: 15s;
    opacity: 0;
}

.banner:nth-child(5) {
    animation-delay: 20s;
    opacity: 0;
}

.banner {   /* Div que contém as imagens */ 
    position: absolute;
    width: 100%;
    height: 100%;
    animation-name: carrossel;
    animation-duration: 25s;
    animation-iteration-count: infinite;
}

EXCERPT FROM THE HTML CODE:

<header>
    <nav class="menu">
        <div id="barra-superior">
            <img src="_logos/montanha (1).png" id="img_logo">
            <span id="logo">Get.Started.Now!</span>
        </div>
    </nav>
    <div class="cabecalho">
        <img src="_fotos/banner.jpg" class="banner">
        <img src="_fotos/foto-montanha.jpg" class="banner">
        <img src="_fotos/mar.jpg" class="banner">
        <img src="_fotos/trilhos.jpg" id="banner" class="banner">
        <img src="_fotos/fogueira.jpg" id="banner" class="banner">
        <img src="_icons/inferior.png" class="seta" id="seta_movimenta">
        <span id="frase"><br><br></span>
    </div>
</header>

When I simplify to from to (which I thought was right) all the images suffer the effect kind of that simultaneously, I don’t understand why. To make matters worse, the last image loops with the penultimate, I also did not understand this behavior. How do I make the images go through organically, going back to the first image at the end and continuing endlessly? Where am I missing? Thxx guys!