How to Add Text Typing Animation Using HTML and CSS

 

Hi to all, in this article I am going to tell you all about how to add text typing animation using HTML and CSS easily in just few minutes.

So, you need to read this article carefully and completely to get clear understanding about how to add text typing using HTML and CSS code easily without any issue or error.

Note: Here I am going to tell you all about adding text typing animation in blogger website and you can use this source code in WordPress and other websites too.

Steps to Add Text Typing Animation In Blogger

Login to Blogger Website

First of all you need to visit official website of blogger.

Now you need to login to your blogger website dashboard by using your login credentials safely.

Backup Blogger Theme code

After successful login to blogger website dashboard, now it's time to backup your blogger theme code, because if any error or issue occurs while saving the source code inside theme editor then you can restore your backup code again and can run your blogger website as usual and to backup your blogger code, you can follow below provided path.

Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.

Open Blogger Theme Editor

After successful backup of your blogger website thee code, now you need to open blogger theme editor section to add the text typing effect animation source code inside it and to open blogger theme editor, you can follow below provided path.

Path: Blogger website dashboard -> Click on theme section -> Click n arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Add CSS Source Code

• Open blogger theme  editor.

• Now you need to search for ]]></b:skin> or </head> tag.

• Now copy below provided CSS source code.

• Paste the copied CSS code just above ]]></b:skin> tag or paste above </head> or &lt;!--<head/>--&gt;&lt;/head&gt; by inclusing <style></style> tags above and below the source code.

• Save the theme code.

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #009090;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-around;
	min-height: 100vh;
}

.text-box{
	font-size: 80px;
	font-weight: 900;
	text-align: center;
	width:100%;
}
.fixed-text{
	display: inline-block;
}
.animate-text{
	display: inline-block;
	vertical-align: top;
	height: 113px;
	overflow: hidden;
}
.animate-text div{
	animation:9s wordChange;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1);
}
.animate-text span{
	position: relative;
	color: #02095a;
	display: block;
	text-align: left;

}
.animate-text span:after{
	content: "";
	position: absolute;
	left: 0;
	border-left: 5px solid #02095a;
	height: 100%;
	animation:3s textType;
	animation-iteration-count: infinite;
	animation-timing-function: steps(10);
	animation-fill-mode: backwards;
	right: -2px;
	background-color: #009090;
	overflow: hidden;
}

@keyframes textType{
	0%{
		left: 0;
	}
	50%{
		left: 100%;
	}
	100%{
		left: 0;
	}
}
@keyframes wordChange{
	0%{
		margin-top: 0;
	}
	33.333%{
		margin-top: -113px;
	}
	66.666%{
		margin-top: -226px;
	}
	100%{
		margin-top: 0;
	}
}

Add HTML Source Code

• Now you need to open blogger page or post or widget, where you want to show the text typing animation in your blogger website.

• Now you need to copy below provided HTML source code.

• Paste the copies HTML code in the Page or Post or Widget where you wan to show text animation to your website users.

• Save it.

<div class="text-box">
 <div class="fixed-text">I am a</div>
 <div class="animate-text">
  <div>
   <span>Designer</span>
   <span>Developer</span>
   <span>YouTuber</span>
  </div> 
 </div>
</div>

You can also use this source code in any website, whether it is WordPress or Traditional websites etc.

Demo

Conclusion

I hope that you all have understood about adding text typing animation using HTML and CSS easily without any issue or error in just few minutes.

If you have any doubts related to this article, then please contact us.