How to create typing effect using CSS

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.