Typewriter animation as the name suggests is an effect that looks like a typing animation, as being typed by a typewriter. We are going to create this animation without JavaScript and just using HTML and CSS.
Approach: To achieve the typewriter effect we will use the following CSS properties.
- animation-timing-function: We need to specify the time of the animation in seconds or milliseconds so that the animation is faster and looks perfect. We also need to specify steps so that each letter appears not in a single flow but one by one as seen in typewriters. In the below code we are using the example GeeksforGeeks as the total number of letters in GeeksforGeeks is 13, so the number of steps used is 13.
- overflow: So that each text appears according to the animation and is not revealed all at once, overflow: hidden is used in the below code.
- white-space: To get the animation on a single line white-space: nowrap is used.
- border-color: As seen in the below code the border color is animated from black to transparent to give the animation a realistic touch of a blinking cursor any color other than black can also be used.
- width: To get a typing like animation width is animated from 0% to 50% (this can vary as per the text height/width or the given text spacing).
Example: In this example, we will be going to use the above-defined properties to create typewriter animation.
HTML
<!DOCTYPE html><html>
<head>
<title>Typewriter Effect</title>
<style type="text/css">
{
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body {
background-color: #2ca32c;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}
h1 {
font-size: 90px;
white-space: nowrap;
overflow: hidden;
animation: typewriter 2s steps(13) infinite alternate,
blink 800ms steps(13) infinite normal;
border-right: 5px solid black;
}
@keyframes typewriter {
from {
width: 0%;
}
to {
width: 50%;
}
}
@keyframes blink {
from {
border-color: black;
}
to {
border-color: transparent;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
|
Output:
Note: For other longer or shorter text, required changes should be done in font size, steps. The time of the animation of text and the cursor should also be changed accordingly.
Article Tags :
Recommended Articles