Typing effects are really impressive therefore it will surely grab the attention of your page viewers.

This post is about creating a simple typing effect using HTML and CSS. To stay basic, we’ll not be using JavaScript in this tutorial.

See the Pen Typing effect using CSS by Mishel Shaji (@mishelshaji) on CodePen.

Add HTML Markup

Add this simple HTML markup.

<div>
<p>CSS Typing animation! <span>|</span></p>
</div>

Add CSS

body {
background-color: #333;
}
div{
overflow: hidden;
}
p {
font-family: 'Courier';
font-size: 22px;
white-space: nowrap;
overflow: hidden;
width: 400px;
color: #fff;
animation-name: appear;
animation-duration: 4s;
animation-timing-function: steps(55, end);
animation-iteration-count: infinite;
}
p > span {
color: #fff;
animation: blink 0.6s infinite;
}
@keyframes appear {
from {
width: 0;
}
,
to {
width: 100%;
}
}
@keyframes blink {
from,
to {
color: transparent;
}
50% {
color: #fff;
}
}

Try it yourself

See the Pen Typing effect using CSS by Mishel Shaji (@mishelshaji) on CodePen.