styleso.css

body{
    padding: 0;
    margin: 0;
    font-family: 'Dela Gothic One', cursive;
    overflow: hidden;
}

.banner1, .banner2, .banner3, .banner4{
    height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

img{
    width:110%;
    position: absolute;
    left: 50%;
    top:50%;
    right: 50%;
    transform: translate(-50%, -50%);
    animation: zoom-out 3s linear infinite;
}

@keyframes zoom-out{
    100%{
        width: 100%;
    }
}

.text-box{
    width: 800px;
    position: absolute;
    top:200px;
    left:100px;
    color: #fff;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    margin-bottom: 40px;
    animation: textup 12s linear infinite;
    transform: translateY(100px);
}

.text-box h1{
    font-size: 60px;
}

.text-box span{
    background: red;
    height: 1px;
    width: 100px;
    position: absolute;
    left:0;
}

.banner1{
    animation: bruno 12s linear infinite;
}

.banner2{
    animation: lp 12s linear infinite;
}

.banner3{
    animation: queen 12s linear infinite;
}

.banner4{
    animation: tp 12s linear infinite;
}

@keyframes bruno{
    0%{
        visibility: visible;
    }
    25%{
        visibility: hidden;
    }
    50%{
        visibility: hidden;
    }
    75%{
        visibility: hidden;
    }
    100%{
        visibility: visible;
    }
}

@keyframes lp{
    0%{
        visibility: hidden;
    }
    25%{
        visibility: hidden;
    }
    50%{
        visibility: visible;
    }
    75%{
        visibility: hidden;
    }
    100%{
        visibility: hidden;
    }
}

@keyframes queen{
    0%{
        visibility: hidden;
    }
    25%{
        visibility: hidden;
    }
    50%{
        visibility: hidden;
    }
    75%{
        visibility: visible;
    }
    100%{
        visibility: hidden;
    }
}

@keyframes tp{
    0%{
        visibility: hidden;
    }
    25%{
        visibility: hidden;
    }
    50%{
        visibility: hidden;
    }
    75%{
        visibility: hidden;
    }
    100%{
        visibility: visible;
    }
}

@keyframes textup{
    10%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(0px);
    }
}

.text-box1{
    animation-delay: 0s;
}


.text-box2{
    animation-delay: 3s;
}


.text-box3{
    animation-delay: 6s;
}


.text-box4{
    animation-delay: 9s;
}