*,*::after,*::before{
    margin:0;
    padding:0;
    list-style:none;
    box-sizing:border-box;
}

body{
    width:100%;
    height:100vh;
    font-family:"Roboto", sans-serif;
    background:#341f97;
    color:#f1f2f6;
    display:flex;
    justify-content:center;
    align-items:center;
}

.textContainer{
    width:400px;
    display:flex;
    gap:10px;
    overflow:hidden;
}

.textContainer .text{
    position:relative;
    font-size:36px;
}

.textContainer .text2{
    color:#ffa502;
}

.textContainer .text2::before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#341f97;
    border-left:2px solid #ffa502;
    animation:animationone 5s steps(14) infinite;
}

@keyframes animationone{
    3%{
        left:0%;
    }
    30%{
        left:100%;
    }
    80%{
        left:100%;
    }
    100%{
        left:0%;
    }
}