Text typing animation using only HTML and CSS.

In this article we will show you how to create Text typing animation using only HTML and CSS. Without JavaScript text typing animation effect is possible, which we show in this article.

Video tutorial of Text typing animation using only HTML and CSS

This tutorial video can help you to create Text typing animation using only HTML and CSS

Text typing animation using only HTML and CSS [Source Codes]

This source code can help you to create Text typing animation using only HTML and CSS.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<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>

</body>
</html>

CSS Code

Copy

*,*: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;
	}
}

Text typing animation using only HTML and CSS.

Video tutorial of Text typing animation using only HTML and CSS

Text typing animation using only HTML and CSS [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery