Skip to content

Instantly share code, notes, and snippets.

@pbrandiezs
Created May 31, 2021 01:41
Show Gist options
  • Save pbrandiezs/03c45769c13e3ccc2aef27f0dc24402e to your computer and use it in GitHub Desktop.
Save pbrandiezs/03c45769c13e3ccc2aef27f0dc24402e to your computer and use it in GitHub Desktop.
Typing Demo CSS - Original from https://codepen.io/denic/pen/GRoOxbM
.wrapper {
height: 100vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 22ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
@keyframes typing {
from {
width: 0
}
}
@keyframes blink {
50% {
border-color: transparent
}
}
<div class="wrapper">
<div class="typing-demo">
This is a typing demo.
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment