document.addEventListener('DOMContentLoaded',function(event){
    // array with texts to type in typewriter
    var dataText = [ "Hi, I'm Ned.", "Developer.", "Writer."];

    function typeWriter(i) {
        // add next character to h1
        document.querySelector("h1").innerHTML = dataText[i] +'<span aria-hidden="true"></span>';

        // wait for a while and call this function again for next character
        setTimeout(function() {
            typeWriter((i + 1)%2)
        }, 10000);
    }

    // start the text animation
    typeWriter(0);
});

.typewriter h1 {
    font-weight: bold;
    color: #fefff7;
    font-family: "Lucida Console";
    font-size: 7em;
    overflow: hidden; /*Hide content before animation*/
    border-right: .1em solid white; /*Cursor*/
    white-space: nowrap; /*Keep text on same line*/
    margin: 0 auto; /*Scrolling effect while typing*/
    letter-spacing: .1em;
    animation:
        typing 3s steps(30, end),
        blink-caret .75s steps(1, end) infinite alternate;
}

/* The typing effect */
@keyframes typing {
   from {
       width: 0
   }
   to {
       width: 100%
   }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
   from, to {
       border-color: transparent
   } 50% {
       border-color: white;
   }
}

<div class="jumbotron" id="jumbotron">
    <div class="typewriter">
        <h1></h1>
    </div>
</div>