Create a Typewriter CSS Text Animation

Video Tutorial

Overview

Sometimes you would like to have a nice and cool text animation like a typewriter text animation which makes it looks like a hacker type of things. You can include this type of animation in your portfolio to show off or even on your business landing page. It just makes it looks elegant.

So we will go through the steps of creating a typewriter Text Animation in Pure CSS and HTML no javascript will be included.

Text Animation

So we will try to create the text Animation in Pure CSS.

You can take a look at the Sandbox.

We simply making the Html and Body tags takes the full width and height. And a Dark background to make it look perfect.

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Anonymous Pro", sans-serif;
  background-color: #111518;
}

The text container will have a special font to make it look more like a typewriter animation.

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

The Anonymous Pro font will do the job.

For the text that needs to apply the animation we can use a div or either p as a container for the text I would prefer a div cause it gives you much better control over the style.

.typewriter-text {
  overflow: hidden;
  position: relative;
  width: 18em;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  font-size: 38px;
  white-space: nowrap;

  animation: typewriter 4s steps(44) 1s 1 normal both,
  blinkTextCursor 400ms steps(44) infinite normal;
}

Make sure to make the overflow hidden to hide anything outside it’s bounding box so we won’t have the text showing outside it’s bounding box.

The white-space no-wrap allows us to display the text in a single line even though it’s parent container doesn’t fit so we could easily apply the typewriter animation.

we also create a white semi-transparent border-right for the blinking cursor effect.

Finally, we apply the intended animation in this case we need two animations to make it look like a typing text animation.

  • Typewriter animation: allows us to move from a completely hidden text to show each character step by step.

  • Blink Text Cursor: it makes the cursor blinks when typing, this makes it even more realistic of a typing animation.

@keyframes typewriter {
  from {
    width: 0;
  }

  to {
    width: 18em;
  }
}

@keyframes blinkTextCursor {

  from {
    border-right-color: rgba(255, 255, 255, 0.75);
  }

  to {
    border-right-color: transparent;
  }

}

For the typewriter keyframes, we move from 0 widths which means the text is going to be completely hidden then it starts showing till it reaches the text full-width 18em. Well this depends on the length of your text so adjust the width value to match your text

s length to make the animation perfect.

For the blinkTextCursor keyframes, we show it at first as completely white and then completely hide it that’s how it plays the blinking cursor just by tweaking the border-right property.

The most important part is using steps function as an animation-timing-function which allows us to create several intervals for the animation each interval plays separately that’s how we can create the typing effect.

Read more about animation-timing-function and steps function at Mozilla Developer.

Lastly, we apply the animation to the text container using the shorthand animation property cause in this case we need to apply two animations at the time to the same element.

.typewriter-text {
  ...
  animation: typewriter 4s steps(44) 1s 1 normal both,
  blinkTextCursor 400ms steps(44) infinite normal;
}

The shorthand animation property has the same meaning as the following properties in-order:

  • animation-name: Specifies the name of the @keyframes animation

  • animation-duration: Specifies how long time an animation should take to complete one cycle

  • animation-timing-function: Specifies the speed curve of the animation

  • animation-delay: Specifies a delay for the start of an animation

  • animation-iteration-count: Specifies the number of times an animation should be played

  • animation-direction: Specifies whether an animation should be played forwards, backwards or in alternate cycles

  • animation-fill-mode: Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)

  • animation-play-state: Specifies whether the animation is running or paused

No Comments Yet