Pure CSS Typing Text Animation with Blinking Cursor

Adding nice and clean animation to a website can make it look good and eye-popping. There are many different ways to create a different type of animations.

Today, I will show you a way of creating a Typewriter Effect with the help of Pure CSS. Its a simple typing animation with blinking cursor for text.

With the help of CSS3, We can easily create Typewriter text animations and quickly implement on the website to make it look exceptionally impressive.

Just basic knowledge of CSS is enough for you to understand the code and process of implementation.

The Markup

To create the animation like a typewriter we need to play with two elements – text and cursor.  Let’s get started with markup.

We will place the text which animated inside the paragraph.

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

The Styling

To apply the styling, We will follow three simple and easy to understand steps:

Step 1

We will start with basic stying by applying a background color to the body. Giving font size and color to text. Set the font family and apply the border right for Cursor.

With the help of white-space: no-wrap, We will able 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.

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

body{
  background-color: #35783c;  
}
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);
}

Step 2

The magic start here in step 2. We will apply two animations each for text and cursor. That’s why we define animated-text and animated-cursor for the paragraph. These are then defined using the @keyframes rule.

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

Step 3

Finally, let me explain to you how animated-text and animated-cursor works.

For “animated-text“: We did apply width which will be changed from 0 at the start of the animation to 472px  at the end of the animation for paragraph text. This is done because we don’t want to show the text at the starting and slowly the text starts visibly as the animation.

For “animated-cursor“: To make the cursor blinking, We did set 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 infinite to results in the blinking of the cursor.

/* 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;}
}

To see how it work, You can refer to demo and download the source file.