<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/