If you want to create a typing animation using CSS, you’re in the right place. I’ve shared all the code below so you can easily copy it and use it in any project.
HTML Part
In this below give you a HTML part and this below code use in a file. Save file as a index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Typing Text</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playwrite+CU:wght@100..400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rowdies:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Welcome back to...</h1>
</div>
</body>
</html>
CSS Part
Use this CSS code internally with the <style> tag inside the head section, or add it externally in a separate file like style.css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: linear-gradient(45deg, #548DFF, #0018D6);
}
.container{
display: inline-block;
}
.container h1{
width: 100%;
white-space: nowrap;
font-family: poppins;
overflow: hidden;
border-right: 3px solid #fff;
color: white;
animation: typing 3s ease-in-out infinite alternate, curser .4s step-end infinite alternate;
}
@keyframes typing {
100%{
width: 0;
}
}
@keyframes curser{
50%{
border-color: transparent;
}
}