<link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
<div class="typewriter">
<h1>Where there is a "will," there are 500 relatives.</h1>
</div>
body {
font-family: 'Special Elite', cursive;
background: #efefef;
padding-top: 5em;
display: flex;
justify-content: center;
}
.typewriter h1 {
overflow: hidden;
border-right: .15em solid green;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation:
type 4s steps(50, end),
blink-cursor .7s step-end infinite;
}
@keyframes type {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-cursor {
from, to { border-color: transparent }
50% { border-color: green; }
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.