Make Typing Text Effect Animation using HTML & CSS

HTML Typing Text Effect Animation

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

It doesn’t become important to use effect and animation, but if you want to stand out your website or want to look differently, 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 visitor.

Not only this,

Google love the design which has high placement of elements and perfect colors scheme which make happen to attract more users.

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

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

Typing Text Effect Animation

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

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

But not only this.

I will also share few others effect and technique which include typing animation using Jquery or Javascript.

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

Make Typing Animation using CSS

By using CSS, we have to use few advanced CSS3 properties to get this done. But before we go an ahead, let’s have a look 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>

Now have a look 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 use the 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 used 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 used the content:''; which is must with :after property.

The animation forwards and steps will be used to create 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 few more examples.

Typing Animation with Jquery

Some people perfect to go with Javascript because of the wide range of browser support. If you are looking for 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 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 which 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 few more javascript solution then here we have more.

Typewriter

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

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

CSS Typewriter Effect

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

yep here is a javascript type version which type 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.

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.

Text Typing Animation with CSS

There are much 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 the less CSS as compare to other solutions. Not only this but also the effect is different than others.

It creates smooth animation and text start typing as the page load then stop after finish the text.

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

If we take a look the HTML, we will find that it is simple just like we did above. It have a div typewriter class name and then place 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 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.

Typewriter Animation

How about this one? Don’t you think it’s creative? Look nice, clean and crisp effect. A Pen is a 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 May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *