メインビジュアルを画面いっぱいに表示して、フェードインさせたい。

<section id="main-visual">
        <div class="container slider_fade">
            <img class="mv-img" src="images/mv/mv1.jpg">
            <img class="mv-img" src="images/mv/mv2.jpg">
            <img class="mv-img" src="images/mv/mv3.jpg">
            
        </div>
    </section>

#main-visual{
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.slider_fade {
    position: inherit;
}

.slider_fade > .mv-img {
    position: absolute;
    list-style: none;
    visibility: hidden;
    animation: anime_slider_fade 12s 0s infinite;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}
.slider_fade > .mv-img:nth-of-type(2) {
    animation-delay: 4s;
    height: 100vh;
}
.slider_fade > .mv-img:nth-of-type(3) {
    animation-delay: 8s;
    height: 100vh;
}

@keyframes anime_slider_fade {
    0% {
        visibility: visible;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
    }
    48.3% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}