Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<div class="demo-typewriter">
<span>This is a typewriter effect!</span>
.demo-typewriter span {
color: #262626;
overflow: hidden;
border-right: .10em solid #FF8D8D;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .4rem;
animation: demo-typewriter 3s steps(30, end), demo-cursor 1s step-end infinite;
@keyframes demo-typewriter {
from {
width: 0;
to {
width: 100%;
@keyframes demo-cursor {
from, to {
border-color: transparent;
50% {
border-color: #FF8D8D;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment