How to create a typing effect with CSS only ?

Adding a little animation to a website can make it eye-popping. There are various ways you can create animations, one of which is adding a typing effect to your text. Typewriter text animations are quick to implement and can do wonders for your website by making it look exceptionally impressive.

12 handpicked typing text animations are shown below along with their source code. A bit of knowledge of CSS and JavaScript is all you need to learn to use these animations. You can go to this post which explains step-wise creation of a typewriter effect.

To begin with, some simple typing animations created using pure CSS are shown which can give an elegant look to your text and website as a whole.

 

<style>
.typ-txt {
  border-right: solid 3px black;
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  color: red;
}

/* Animation */
.typ-txt {
  animation: animated-text 4s steps(29,end) 1s 1 normal both,
             animated-cursor 600ms steps(29,end) infinite;
}

/* text animation */

@keyframes animated-text{
  from{width: 0;}
  to{width: 472px;}
}

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: black;}
  to{border-right-color: transparent;}
}
</style>
<center>
<div class="typ-txt">CSS Text Typing Animations!</div>
</center>