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.

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.


Share Tweet Send
Loading...