Creating Typewriter Text Animation using CSS

CSS animations can be used to create beautiful typing effects. One such typewriter animation is discussed in this post.

See the Pen Typewriter Text Animation by Aakhya Singh (@aakhya) on CodePen.

Any typewriter animation consists of two elements - text and cursor. The entire code to create such an animation is explained below.

The Structure

The text to be animated is written inside a paragraph.

HTML

<p>This is a typewriter effect.</p>

The Styling

Styling is just a three step process.

Step 1

Do basic CSS styling like giving background color to the body and giving font color and font size to the text.

CSS

@import @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body{
  padding: 40px;
  background-color: #121212;  
}

p {
  font-family: 'Source Code Pro', monospace;  
  font-size: 28px;
  color: rgba(255,255,255,.70);
}

Step 2

Style the right border of the paragraph by giving it some width and color using the border-right property. This right border is nothing other than our cursor!

CSS

p {
  border-right: solid 3px rgba(0,255,0,.75);
}

Step 3

After having styled our text and created our cursor, we are left with animation. There will be two animations - one for the text and one for the cursor.

Two animations named "animated-text" and "animated-cursor" for text and cursor respectively are given to the paragraph. These are then defined using the @keyframes rule.

For "animated-text", width of the paragraph is changed from 0 at the start of the animation to 472px at the end of the animation. This is done so that no text is visible at the starting and slowly the text starts becoming visible as the animation advances. Select the width of the paragraph such that it equals the width of the line of text.

For "animated-cursor", the opacity of the cursor is changed from 0 (transparent) at the start of the animation to 0.75 at the end of the animation. Since the iteration count for this animation is set to infinite, it results in the blinking of cursor.

CSS

/* Animation */
p {
  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: rgba(0,255,0,.75);}
  to{border-right-color: transparent;}
}

The paragraph is given white-space: no-wrap to prevent the text wrap to the next when the paragraph width is less than 472px during the animation. Similarly, overflow: hidden is given to hide the overflowing text when its width is less than 472px.

CSS

p {
  white-space: nowrap;
  overflow: hidden;    
}

Summing Up

The entire code for the animation is given below.

HTML

<p>This is a typewriter effect.</p>

CSS

@import @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body{
  padding: 40px;
  background-color: #121212;  
}

p {
  border-right: solid 3px rgba(0,255,0,.75);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Source Code Pro', monospace;  
  font-size: 28px;
  color: rgba(255,255,255,.70);
}

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

/* text animation */

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

/* cursor animations */

@keyframes animated-cursor{
  from{border-right-color: rgba(0,255,0,.75);}
  to{border-right-color: transparent;}
}