How to Make HTML Typing Text Effect Animation Using CSS

This tutorial is about to create a html typing text effect by using CSS3 animation. Not only this but we will also create jQuery & multiple lines typewriter effect using CSS.

This tutorial is about to create a typing text effect by using HTML and CSS animation. Not only this but we will also create jQuery & multiple lines typewriter effect using CSS.

Building animation is always fun. Do you love CSS animations? If you are a creative web designer, then I am pretty much sure you surely love it.

One of the great effects that can be created using such animation is typing HTML text effect. This effect can be created using HTML and CSS only. There is no javascript required to make it work.

It doesn’t become important to use effect and animation, but if you want to stand out on your website or want to look different, then it’s ready to go with some nice effects.

Creative things are always great fun and make your web page look awesome and attract more visitors.

Not only this,

Google loves the design which has high placement of elements and perfect colors scheme which makes it happen to attract more users.

The effects and animation play a vital role when you want your site visitor to stay more. Today, we will see one such animation and see how to build it.

Anyway, let’s see how to create a typing text animation effect by using HTML and CSS.

How to Create HTML Typing Text Effect Animation

The CSS3 helps us a lot to build complex animation and we are using it to use in our this tutorial to build the typing effect.

There are many different ways to create text typing but one is using @keyframes property. That’s what I plan to use to create this effect.

I will also share a few other effects and technique which include CSS typing animation using Jquery or Javascript.

Let’s first have a look at a pure CSS method.

HTML Structure

By using CSS, we have to use a few advanced CSS3 properties to get this done. But before we go ahead, let’s have a look at the HTML.

We have simple a div typingEffect and then we place the heading inside it.

<div class="typingEffect">
    <h3>Front-end developer.</h3>
</div>

CSS Style

Now have a look at the CSS, and we will use different techniques to get this done. We have to use transform, calc: after, @keyframes and few other elements.

If we look at the main div, we will found that it uses positioning and transform.

.typingEffect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 25%;
}

When we try to make the heading to be typing text, we require to use the positioning relative and Calc for its width.

The other things like color, line-height, white-space, and font-size are generally and can be changed as you like.

.typingEffect h3 {
  position: relative;
  color: #152860;
  line-height:normal;
  text-align: center;
  white-space: nowrap;
  font-size: 40px;
  letter-spacing: 0.0625em;
  width: calc(20ch + 20*0.0625em);
}

Here we have to play with CSS advanced properties. We need to use the content:''; which is must with: after property.

The animation forwards and steps will be used to create a typing effect and you also notice the moving element which is used so we can define the animation as @keyframes.

.typingEffect h3:after {
  display: block;
  position: absolute;
  content: '';
  width: calc(20ch + 20*0.0625em);
  height: 2ex;
  left: 0;
  top: 0;
  background: #eff5ed;
  animation: 0.6s blink 20, move 3s 1.5s forwards steps(1);
  border-left: 1px solid #152860;
  box-shadow: 0px 1ex 0px 0px #eff5ed;
}

I am not going to list the @keyframes animation code here but you will find in the source code. Ok, let’s have a look at a few more examples.

#1. Typing Animation with jQuery

Some people perfect to go with Javascript because of the wide range of browser support. If you are looking for a JavaScript solution then here we have Jquery typing animation.

You don’t need to write CSS for this version, only require HTML and Jquery. let’s have a look at the demo below.

See the Pen JS Typewriter by Simon Shahriveri (@hi-im-si) on CodePen.

The HTML is simple and easy to understand. You have to define the heading and then place the anchor link inside it.

The different HTML5 attribute needs to define, and in our case, we have set the data-period and data-type. It also requires adding a class that will be controlled using javascript.

Finally, we will add a span HTML tag.

<h1>
  <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Si.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'>
    <span class="wrap"></span>
  </a>
</h1>

What do you think about this one? I am sure you love to see a few more javascript solutions then here we have more.

#2. Typewriter Text Animation

How about the typewriter? It writes in a crisp way and provides an awesome looking typing effect. The text types automatically. A pen is created by gave who is the front-end developer.

See the Pen typewriter by Gavra (@gavra) on CodePen.

#3. CSS Typewriter Effect

Do you want to type text more than one time? I mean to say you want a CSS typing animation multiple lines effects? Oh yes, that’s cool.

yep, there is a javascript type version that types the text automatically and after finishing, it starts the second line by replacing the first line.

See the Pen CSS typewriter by Danielgroen (@danielgroen) on CodePen.

#4. Tippy Tappy Typer

What do you think about the mixture of HTML/CSS and Javascript? Does this something you love? If so, then here we have that one.

The tippy types don’t stop after finishing one. It types the text continuously. You can define as much text as you want, the type will stop after finish writing all of the text.

See the Pen Tippy-Tappy-typer by Stove (@stevn) on CodePen.

#5. Text Typing Animation with CSS

There are many more tutorials available over the internet about building a typing text effect. The one is designed by Geoff Graham which creates with CSS only.

This one used less CSS as compare to other solutions. Not only this but also the effect is different than others.

It creates smooth animation and text starts typing as the page load then stops after finish the text.

See the Pen jrWwWM by Geoff Graham (@geoffgraham) on CodePen.

If we take a look at the HTML, we will find that it is simple just like we did above. It has a div typewriter class name and then places the heading H1 inside it.

<div class="typewriter">
  <h1>The cat and the hat.</h1>
</div>

The CSS version is more compact and smaller. You don’t need to write a lot of code. Just a few lines of code good enough to create such type of effect.

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

What do you think about the minimum uses of @keyframes? Is it simple?

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

Does this resource good enough for you? It may be but maybe not, right? Ok, no problem, we still have few more demos to show you.

let’s have a look following few more examples.

#6. Typewriter Animation

How about this one? Don’t you think it’s creative? Look nice, clean and crisp effect. A Pen is designed by Thiago Teles Pereira.

It uses the transform, calc, and @keyframes to build it with pure CSS only.

See the Pen Typewriter animation pure CSS by Thiago Teles Pereira (@thiagoteles) on CodePen.

How useful this set of resources for you? Have you found another one which is really cool? Don’t mind to let us know in below comment section.

You Might Be Interested In: