Blog
how to create a typewriter effect with css ?
adding typewriter effect to some of your text help engage your visitors and keep them interested in reading further. the typewriter effect can be used for many purposes such as landing pages, personal webistes, etc.
the typewriter effect is easy to create and all you will need to for this tutorial is a basic knowledge of css and css animations .
how it's work ?
- the typewriter animation is going to reveal our text element by change its width from 0 to 100% using css step function
-
a blink animation is going to animate cursor that 'types out' the text
creating a page for our effect
first let's create a page for our typewriter demo.
<!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html>
Styling the container for the typewriter text
now that we hapve the layout of the page,let's style the "<div"> with class 'type-out'. add the code below to style section:
.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}
in order for the typewriter to work we have added the following:
- "overflow: hidden;" and a "width:0;" to make sure the text content is not showed until the typing effect has started.
- "border-right: 0.15em solid orange;" to create the typewriter cursor.
before making the typing effect, in order to stop cursor at the last letter of the 'typed-out' element once it has been fully typed out, the way a typewriter would, we will create a container for the 'typed-out' element and add "display: inline-block;"
.container {
display: inline-block;
}
Making the animation
the typewriter animation is going to create the effect inside the "typed-out" element being typed out, letter by letter. we will use the @keyframe css rule
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
as you can see all this animation does is change an elements width from 0 to 100% .
now we will include this animation in our "typed-out" class and set its animation direction to "forwards" to make sure the text element won't go back to "width:0;" after the animation has finished .
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}
out text element will simply be show in one smooth step from left to right .
Adding Steps to Achieve a Typewriter Effect
so far, out text is showed but in a smooth way that doesn't show the text letter by letter. this is a start but obviously its not what a typewriter effect looks like.
to make this animation show our text letter by letter, or in steps , we need to split the typing animation included by the "typed-out" class into steps in order to look like it's being typed out. this is where the "step" css function comes in:
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation:
typing 1s steps(20, end) forwards;
}
as you can see we have split the "typing" animation into 20 step using the css steps() function
here's out full code :
<html>
<head>
<title>Typewriter effect</title>
</head>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
.container{
display: inline-block;
}
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
animation:
typing 1s steps(20, end) forwards;
font-size: 1.6rem;
width: 0;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
</style>
<body>
<h1>I'm Matt, I'm a</h1>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html>
Adjusting steps for a longer typing effect
to adjust for longer pieces of text, you will need to increase the steps and duration of the typing animation :
Adjusting steps for a shorter typing effect
and to adjust for shorter pieces of text, you will need to decrease the steps and duration of typing animation .
Make and style the blinking cursor animation
It is become tradition to add blinking cursor to imitate the more modern computer blinking cursor effect. the blinking cursor animation helps to make the typed out text stand out even more from static text elements .
To add a blinking cursor animation to our typewriter animation, we will first create the blink animation . add the following to style section :
@keyframes blink {
from { border-color: transparent }
to { border-color: orange; }
}
Inside our page, this animation will change the border color of the "typed-out" element's border, which is used as a curser for the typewriter effect, from transparent to orange color .
We'll include this animation in the typed-out class rule and set its animation direction property to infinity to make the cursor blinking every 0.8s forever :
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation:
typing 1s steps(20, end) forwards,
blink .8s infinite;
}
Conclusion
We have seen in this article how easy it is to use CSS to create typewrite animation. this typing effect can add interest and delight to your webpages .
I hope you have enjoyed this article .
Category
Recent posts
how to create a typewriter effect with css ?
07 November 2021
How to Expand Your Engineering Skill Set Without Q...
04 October 2021
Comparing NPM (Node Package Manager) and NPX (Node...
04 October 2021
Yarn vs npm : Which Package Manager Should You Cho...
04 October 2021