CSS Typing Effect using just CSS
Here is a typing animation, the only issue with this one is you need to add in the number of steps depending on the amount of characters in your string.
So the text in the class typing-demo will be typed out like an old typewriter on the screen animation effect.
In my string there is 50 characters so i will change this line to 50.
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
and here is the result
animation: typing 2s steps(50), blink .5s step-end infinite alternate;
Then just also need to change the width to 50ch rather than 22 for the 50 characters that we want to show here.
width: 22ch;
changes to
width: 50ch;
CSS Typing Effect using just CSS Demo
View Demo Full Screen View Demo New Tab
CSS Typing Effect using just CSS Code
HTML
<div class="wrapper">
<div class="typing-demo">
You can add any text in here. Like CSSBundle.com!
</div>
</div>
CSS
.wrapper {
height: 100vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 50ch;
animation: typing 2s steps(50), 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
}
}
External Link for CSS Typing Effect using just CSS