Typographical animation as the name suggests is a result that looks like a typewriter, as you type a typewriter. We will create this animation without JavaScript and use HTML and CSS only.
To achieve the effect of the typewriter we will use the following CSS Code.
Add HTML
Adding a text in html file and make a class with name of class is typewriter
<!DOCTYPE html>
<html>
<head>
<title>Typewriter Effect Using CSS</title>
</head>
<body>
<h1 class="typewriter">Welcome To KrTricks</h1>
</body>
</html>
Add CSS
Add CSS or style in your typewriter and make this typewriter animation.
.typewriter {
font-size: 30px;
white-space: nowrap;
overflow: hidden;
animation: typewriter 2s steps(13) infinite alternate,
blink 1000ms steps(13) infinite normal;
border-right: 5px solid black;
}
@keyframes typewriter {
from {
width: 0%;
}
to {
width: 90%;
}
}
@keyframes blink {
from {
border-color: black;
}
to {
border-color: transparent;
}
}
Complete Code
This is the full code of css typewriter
<!DOCTYPE html>
<html>
<head>
<title>Typewriter Effect Using CSS</title>
<style type="text/css">
.typewriter {
font-size: 30px;
white-space: nowrap;
overflow: hidden;
animation: typewriter 2s steps(13) infinite alternate,
blink 1000ms steps(13) infinite normal;
border-right: 5px solid black;
}
@keyframes typewriter {
from {
width: 0%;
}
to {
width: 90%;
}
}
@keyframes blink {
from {
border-color: black;
}
to {
border-color: transparent;
}
}
</style>
</head>
<body>
<h1 class="typewriter">Welcome To KrTricks</h1>
</body>
</html>
Output
Note: For any longer or shorter text, the necessary changes should be made to the font size, steps. Text animation time and cursor should also be adjusted accordingly.
