<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1><span>L</span><span>a</span><span>s</span><span>e</span><span>r</span><span> </span><span>T</span><span>e</span><span>x</span><span>t</span></span></h1>

@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans:300"); html, body { height: 100%; overflow: hidden; user-select: none; } body { display: flex; align-items: center; justify-content: center; background: radial-gradient(#1a1a1a, #000000); } h1 { font: 300 50px/1 Alegreya Sans, monospace; white-space: nowrap; color: whitesmoke; } span { display: inline-block; animation: stretch 2.5s cubic-bezier(0.4, 1.4, 0.75, 0.9) infinite; transform-origin: center; } span:nth-of-type(1) { animation-delay: 0.25s; } span:nth-of-type(2) { animation-delay: 0.5s; } span:nth-of-type(3) { animation-delay: 0.75s; } span:nth-of-type(4) { animation-delay: 1s; } span:nth-of-type(5) { animation-delay: 1.25s; } span:nth-of-type(6) { animation-delay: 1.5s; } span:nth-of-type(7) { animation-delay: 1.75s; } span:nth-of-type(8) { animation-delay: 2s; } span:nth-of-type(9) { animation-delay: 2.25s; } span:nth-of-type(10) { animation-delay: 2.5s; } @keyframes stretch { 5% { transform: scaleX(5000); opacity: .1; } 15% { transform: scaleX(1); opacity: 1; } }