Pojawiające się napisy- animation delay

Question

Dzień dobry. Mam pewien problem z animacją napisów. Chciałbym, żeby napisy pojawiały się jeden po drugim. Problem pojawia się na początku animacji. Widoczne są wszystkie trzy h1 na sobie. Mam wrażenie, że wszystko działa poprawnie w momencie kiedy animacja zaczyna się drugi raz. Po ponownym wczytaniu strony wszystko wraca do początku i napisy się pokrywają. Napisałem keyframes z opacity dla jednego h1 i ustawiłem animation-delay dla dwóch pozostałych. Dlaczego w momencie wczytania strony nie działa animation delay? Byłbym wdzięczny za pomoc, bo już skończyły mi się pomysły i nie mogę sobie z tym poradzić. Niżej wkleję link z codepenem. 

https://codepen.io/marcin-reutt/pen/gOMdBEb

<div class="banner">
            <h1>architektura wnętrz</h1>
            <h1>aranżacja przestrzeni</h1>
            <h1>metamorfozy</h1>
        </div>

.banner {
    position: absolute;
    top: 46px;
    height: 70vh;
    width: 100%;
    background-image: url(../img/pokoj.jpg);
    background-position: center;
    background-size: cover;
}

.banner h1 {
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 30px;
    text-transform: uppercase;
    animation: text 15s linear infinite;
}

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

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


@keyframes text {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}

 

Answer 1

dodaj opacity na starcie dla drugiego i trzeciego napisu. (trzy h1 to zły pomysł, zmień to na spany w h1)

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