How To Create Text Typing Animation using HTML & CSS

How to Create a Text Typing Animation in CSS

Below I have shared the complete tutorial on how it is made for you. Before sharing the tutorial, let me tell you something about this Text Typing Animation Effect.

First I designed the webpage. Then here I have used some text which is in a completely fixed state and the rest has used a lot of text which will be typed in multiple ways. Of course, there is a cursor that makes this animation even more interesting.

Step 1: Design the web page

I designed the webpage using the following CSS codes. Here I have used black as the background color of the web page.

Page Title

Step 2: Add text to Typewriter

I have added the text using the following HTML codes. The color of the tests typed here is green. I have used overflow hidden for only one text to be seen. Overflow Hidden helps to see only one of the typed text and hide the rest.

I am a

Developer

Web Designer

Blogger

YouTuber

.type {

display:inline-block;

vertical-align: bottom;

}

.type > span {

color: #14f3db;

display:grid;

overflow: hidden;

height:1.2em;

}

Create Text Typing Animation using HTML & CSS

Step 3: Add animation to CSS text typing

Now I have added animation using the following CSS. I have used three codes for animation here. First I gave the animation in the cursor. Then I used animation in the text.

Here you will have 2 seconds to type each text. It will take two seconds to remove it again. At the end of it all, I used 16 seconds for the complete typing animation. Since I have used four texts here and it will take 4 seconds for each text to be typed and removed. I have used infinite here so that this method continues till infinity time.

.type span span {

width:0%;

max-width:max-content;

overflow: hidden;

height:inherit;

word-break:break-all;

animation:

c 0.5s infinite steps(1),

t 2s linear infinite alternate,

m 16s steps(4) infinite;

}

.type span span:before {

content:” “;

display:inline-block;

}

Step 4: Enable text typing animation

Above we added animation but we need to use @keyframes to make it work.
I first executed the text using @keyframes. At 90-100% of the total time (2 seconds) we will see the text. It will start to be seen from 0% to 90% and we will see it completely.

@keyframes t{

90%,100% {width:100%}

}

I have executed the cursor using the following CSS codes. The cursor will be seen every 0.5 seconds and will be hidden again.

@keyframes c{

0%,100%{box-shadow:5px 0 0 #0000}

50% {box-shadow:5px 0 0 white}

}

@keyframes m{

100% {transform:translateY(-400%)}

}

Hopefully from this tutorial, you have learned how to create text typing animations using only HTML and CSS code. This tutorial also shows you how to type multiple texts. Please comment on how you like it.

Page Title

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Text Typing Animations</title>
 <style media="screen">
 .type {
 display:inline-block;

vertical-align: bottom;
}

.type > span {
  color: #14f3db;
  display:grid;
  overflow: hidden;
  height:1.2em;
}

.type span span {
  width:0%;
  max-width:max-content;
  overflow: hidden;
  height:inherit;
  word-break:break-all;
  animation:
    c 0.5s infinite steps(1),
    t 2s linear infinite alternate,
    m 16s steps(4) infinite;
}
.type span span:before {
  content:" ";
  display:inline-block;
}

@keyframes t{
  90%,100% {width:100%}
}

@keyframes c{
  0%,100%{box-shadow:5px 0 0 #0000}
  50%    {box-shadow:5px 0 0 white}
}

@keyframes m{
  100% {transform:translateY(-400%)}
}

</style>
</head>
<body>

I am a 
 
 Developer
 Web Designer
 Blogger
 YouTuber
 

</body>
</html>

output

Post Views: 138

How to Create a Text Typing Animation in CSS

Step 1: Design the web page

Step 2: Add text to Typewriter

Step 3: Add animation to CSS text typing

Step 4: Enable text typing animation

Leave a Comment Cancel Reply