/*Quitamos el padding y el margin*/
* {
    margin: 0;
    padding: 0;
    font-family: 'Comic Sans MS', Helvetica, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

/*Contenedor del texto*/
.container {
    width: 400px;
    overflow: hidden;
}

/*Texto que se modifica*/
.container .text {
    position: relative;
    color: #40F4A8;
    ;
    font-size: 30px;
    font-weight: bold;
}

/*Texto fijo*/
.container .text.first-text {
    color: #FFF;
}

/*Cursor*/
.text.sec-text:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    border-left: 2px solid #40F4A8;
    ;
    animation: animate 4s steps(16) infinite;
}

/*Animación*/
@keyframes animate {
    40%, 60% {
        left: calc(100% + 4px);
    }

    100% {
        left: 0%;
    }
}