Create A Typewriter Effect In CSS

Typographical animation as the name suggests is a result that looks like a typewriter, as you type a typewriter. We will create this animation without JavaScript and use HTML and CSS only.

To achieve the effect of the typewriter we will use the following CSS Code.

Add HTML

Adding a text in html file and make a class with name of class is typewriter

<!DOCTYPE html> 
<html>
   <head>
      <title>Typewriter Effect Using CSS</title>
   </head>
   <body>
      <h1 class="typewriter">Welcome To KrTricks</h1>
   </body>
</html>

Add CSS

Add CSS or style in your typewriter and make this typewriter animation.

 .typewriter { 
 font-size: 30px; 
 white-space: nowrap; 
 overflow: hidden; 
 animation: typewriter 2s steps(13) infinite alternate, 
 blink 1000ms steps(13) infinite normal; 
 border-right: 5px solid black; 
 } 

 @keyframes typewriter { 
 from { 
 width: 0%; 
 } 

 to { 
 width: 90%; 
 } 
 } 

 @keyframes blink { 
 from { 
 border-color: black; 
 } 
 to { 
 border-color: transparent; 
 } 
 }

 

Complete Code

This is the full code of css typewriter

<!DOCTYPE html> 
<html>
   <head>
      <title>Typewriter Effect Using CSS</title>
      <style type="text/css"> 
         .typewriter { 
         font-size: 30px; 
         white-space: nowrap; 
         overflow: hidden; 
         animation: typewriter 2s steps(13) infinite alternate, 
         blink 1000ms steps(13) infinite normal; 
         border-right: 5px solid black; 
         } 
         @keyframes typewriter { 
         from { 
         width: 0%; 
         } 
         to { 
         width: 90%; 
         } 
         } 
         @keyframes blink { 
         from { 
         border-color: black; 
         } 
         to { 
         border-color: transparent; 
         } 
         } 
      </style>
   </head>
   <body>
      <h1 class="typewriter">Welcome To KrTricks</h1>
   </body>
</html>

Output

 

Note: For any longer or shorter text, the necessary changes should be made to the font size, steps. Text animation time and cursor should also be adjusted accordingly.

Leave a Comment

Your email address will not be published.