Create a Typewriter Animation Using HTML and CSS
In this tutorial, we'll explore how to create a typewriter animation effect using HTML and CSS. This effect will make text appear as if it's being typed out character by character, similar to a typewriter machine.
HTML Structure
Let's start by setting up the basic HTML structure for our typewriter animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="typewriter">I am a Billionaire.</div>
</div>
</body>
</html>
In the above code, we have a container div with a child div having the class "typewriter". The text "I am a Billionaire." will be displayed inside this div and animated to create the typewriter effect.
CSS Styling
Next, we need to add the CSS code to style the typewriter animation. We'll define the necessary styles and animations in the "style.css" file:
.typewriter {
font-family: consolas;
font-size: 3em;
letter-spacing: 0.15em;
border-right: 0.15em solid;
overflow: hidden;
white-space: nowrap;
animation: cursor 0.5s step-end infinite alternate, typing 2s;
}
@keyframes cursor {
50% {
border-right: transparent;
}
}
@keyframes typing {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.container {
display: inline-block;
}
In the above CSS code, we have defined the following styles and animations:
The .typewriter class sets the font family, font size, and letter spacing for the text. It also adds a right border, which will act as a cursor during the animation. The overflow property is set to hidden to hide any overflow of the text. The white-space property is set to nowrap to prevent line breaks in the text.
The cursor animation creates a blinking effect for the border-right property. It changes the border to transparent at 50% of the animation, giving the illusion of a blinking cursor.
The typing animation animates the width of the .typewriter element from 0% to 100%, making the text appear as if it's being typed out.
Conclusion
By combining the HTML structure and CSS styling, we have successfully created a typewriter animation effect. Feel free to customize the text, font styles, or animation duration to suit your needs.
You can further enhance this animation by adding more text, adjusting the animation timings, or combining it with other effects. Let your creativity guide you!
You can find the full code and a live demo of the typewriter animation on GitHub.
Happy coding!
