Creating Animated Text Typing Effects With CSS

Text typing animation is usually created with the help of Jquery, but in this article we will try to make it only with CSS.

This animation can of course be used if you want to make some kind of presentation on the website, or just to beautify the website page.

Type
Typing Illustration, credit photo by Janelene Juanillo

This animation is also usually seen on hacked websites, usually the hacker leaves a trail with a message that looks as if it is being typed.

How to Make it?
To make it not too difficult, just a few lines of css code then we can get the effect of typing the text on our website.

HTML Code

Here’s the HTML code used:

Welcome to Tutorial Web Design Indonesia | http://www.tutorial-webdesign.com

It can be seen there that we create a class with the name .container-typed.

CSS Code

For the CSS code we use CSS Animation which is a feature of CSS3

.container-typing
{
font-size: 22px;
width: 740px;
whitespace:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}

@keyframes type{
from { width: 0; }
}

@-webkit-keyframes type{
from { width: 0; }
}
It can be seen in the css code above that we create an animation with the name type and set the animation on the keyframe.

Next add overflow:hidden so that when the animation changes the paragraph size to 0 we won’t be able to see the text. Finally we can add a typing animation with the steps() function

The animation will increase the paragraph size from 0 to 740px, in 50 frames thereby creating the effect that text is being typed.

DEMO | DOWNLOAD CODE

That’s all for this tutorial, hopefully it will add insight and improve all of our skills.

Greetings Web Design Indonesia.