CSS Typewriter Effect

CSS Typewriter Effect

CSS typewriter effect is also known as typewriter animation in CSS. It allows a developer to create a CSS text animation as though they are being typed on a typewriter. This CSS text animation is basically made to mimic the early typewriter writing concept. In this rule, each character appears one after the other. Today we will create a typewriter animation using HTML and CSS keyframes properties. Below is a helpful video tutorial showing the steps to make this typewriter effect. Our YouTube channel deals with front-end development. You can subscribe to our channel if you are just starting out in web design.

Video Tutorial:

Hope you have watched the video tutorial. This CSS typewriter effect plays an important role in bringing a nostalgic and engaging feel to the text content of your website. There are numerous strategies to get website users to focus on a specific text. One approach to highlight a specific text is by typewriter text animation. Additionally, this kind of CSS text movement gives your website a more attractive and distinctive look. This snippet creates two animations together. One is the typing animation and the other is the cursor animation which will blink towards the end of the text. The CSS steps() function is used for typing animation. The border-right value for the blink animation is transparent at (0%, 100%) states, and white at 50% states. More information is provided in the video up above.

You May Also Like:

CSS Typewriter Effect [ Source Code ]:

First, you need to create HTML & CSS files for making this snippet. After linking properly, copy the code from the code box below and paste it into your project. If you get any error after checking it in your browser then you can download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
	<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>CSS Typewriter Effect</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">	
</head>
<body>
    
	<div class="header">
		<div class="header-text">
			<div class="content">
				<h1>Business Agency</h1>
				<p>Lorem ipsum dolor sit amet</p>				
				<a href="#" class="btn">Contact Us</a>
			</div>
		</div>
	</div>
	
</body>
</html>

ADD CSS:

*{
	margin: 0; 
	padding: 0;
	box-sizing: border-box;
}
body{
	background: #000;
	font-family: 'Poppins', sans-serif;
}
.header{
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(360deg,rgba(0,0,0,0.9),transparent), url(img/1.jpg);
	background-size: cover;
}
.header-text{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
}
.content h1{
	font-size: 45px;	
}
.content p{	
	margin:0px;	
	font-size: 30px;
  white-space:nowrap;
  overflow:hidden;
  animation:typing 4s steps(22,end) forwards,
            blink 1s infinite alternate;
}
.btn{
	text-decoration: none;
	padding: 15px 35px;
	margin-top: 50px;
	border-radius: 5px;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	background: deepskyblue;
	display: inline-block;
}
@keyframes typing{
	0%{width: 0%;}
	100%{width: 100%;}
}
@keyframes blink{
	0%, 100%{
		border-right: 2px solid transparent;
	}
	50%{
		border-right: 2px solid #fff;
	}
}

Hope the code is working properly. Go to our homepage and click the Load More button below. You'll find many similar source codes there. If you enjoy our website content, please share it with your friends. We would like to thank you for your visit to our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box