<p class="css-typing">Be <span data-typer-targets="a developer,a hero,the boss">the master</span> you too.</p>
 .css-typing
{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 5s steps(50, end);
    animation: type 5s steps(50, end);
    font-size: 44px;
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}
/* =================================
   TYPING EFFECT
=================================== */
(function($) {
    "use strict";

    $('[data-typer-targets]').typer();
    $.typer.options.clearOnHighlight=false;

})(jQuery);

// http://cosmos.layervault.com/typer-js.html
// https://www.paulund.co.uk/create-typing-effect
// https://www.mattboldt.com/demos/typed-js/

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://rawgit.com/layervault/jquery.typer.js/master/src/jquery.typer.js