Making a typewriter impact is less complicated than you assume. Whereas the most typical option to obtain this impact is through the use of JavaScript, we may additionally use plain CSS to create our typewriter animation.
On this article, we’ll have a look at the way to create a typewriter animation impact with solely CSS. It’s easy, good, and straightforward. We’ll additionally check out the professionals and cons of making this impact with CSS versus JavaScript.
To comply with this text and animate the ultimate typewriter impact, you will have a fundamental understanding of CSS and CSS animation. You probably have this baseline information, then you definitely’re good to go. We’ll cowl the next:
Let’s bounce proper in.
Professionals and cons of utilizing JavaScript vs. CSS for typewriter animation
Finally, the selection between CSS and JavaScript will rely in your particular wants and assets. Let’s go over some advantages and downsides of every strategy that will help you resolve.
Utilizing CSS solely is easier and simpler to implement than utilizing JavaScript. This strategy additionally makes use of fewer assets than JavaScript, which could be essential for efficiency on low-end units.
Nonetheless, when utilizing CSS solely, the typewriter animation is probably not as dynamic because it might be with JavaScript. Moreover, chances are you’ll not be capable to deal with extra complicated eventualities, corresponding to altering the content material of the animation on the fly.
Compared, utilizing JavaScript gives extra management over the animation. You possibly can fine-tune the timing of the impact and make it extra dynamic. JavaScript could be extra versatile and adaptable than CSS, particularly if you must change the content material of the animation shortly.
However, JavaScript could be extra complicated to implement than CSS, particularly for builders who will not be conversant in it.
In case you simply want a easy, static typewriter impact, CSS may be the way in which to go. However should you want extra management or dynamic content material, JavaScript may be the higher alternative.
Now let’s transfer on to constructing our typewriter impact!
Overview of our typewriter CSS animation mission
To realize the typewriter impact, we are going to animate our textual content in order that it shows textual content progressively. We will even have a cursor that varieties out the textual content after which continues to blink as soon as it’s finished typing.
Earlier than we dive in, let’s evaluate a number of the CSS properties we’ll be utilizing.
We’ll use @keyframes for animations, as this at-rule offers us extra management over the animation we wish to carry out. Utilizing the overflow property on our content material will be sure that every phrase shows in accordance with the animation quite than being proven all of sudden.
The white-space property will trim the animation right down to a single line. In the meantime, the border-right-color property will assist animate our cursor from gentle gray to clear, giving the animation a practical contact of a blinking cursor.
Lastly, the width property is animated from 0% to 100% to realize the impact of every letter showing separately.
Organising the mission
First, let’s outline the HTML construction for the textual content that we’ll animate with the typewriter impact utilizing CSS. Contained in the folder for this mission, create an index.html file, which is able to act as our webpage for this mission demo, and paste this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Suitable" content material="IE=edge" />
<meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
<hyperlink rel="stylesheet" href="https://weblog.logrocket.com/creating-typewriter-animation-css/new.css" />
<title>Doc</title>
</head>
<physique>
<div class="container">
<p class="first_line">Whats up. My identify is Temitope</p>
<p class="second_line">and it is a typewriter impact</p>
</div>
</physique>
</html>
We included a div container inside this file with two paragraphs of textual content. Every paragraph has its personal class — first_line and second_line, respectively — as we try to realize a multiline typewriter impact.
That’s all we have to do inside our index.html web page. Let’s transfer on to styling our webpage and creating our animation.
Styling the webpage
Create one other file contained in the mission folder referred to as fashion.css and paste this:
@import url("https://fonts.googleapis.com/css2?household=Main+Mono+Show&show=swap");
physique {
top: 100%;
width: 100%;
background: #111;
coloration: #d8e0db;
font-family: "Main Mono Show", monospace;
}
.container {
margin-top: 5%;
width: 100%;
top: 100%;
padding: 70px;
}
.first_line,
.second_line {
white-space: nowrap; /* maintain textual content in a single line */
overflow: hidden; /* conceal textual content behind the cursor */
margin: 0.5rem auto;
font-family: "Main Mono Show", monospace;
font-size: 2rem;
font-weight: daring;
}
.first_line {
border-right: 2px stable rgba(17, 17, 17, 0.9);
}
.second_line {
border-right: 2px stable rgba(17, 17, 17, 0.9);
}
In our fashion.css file, we try to fashion each strains of our textual content. We used some CSS properties we mentioned earlier for our animation to work.
We set the overflow property as hidden to stop undesirable horizontal scrolling and further whitespace within the mission. The white-space: nowrap setting will get our animation right into a single line.
Lastly, the border-right property will act as our cursor, which we wish to blink because the textual content is displayed. We added two of those — one for every line — however the black coloration we assigned makes them invisible for now.
You’ll have seen that we set the background coloration to black utilizing the hex coloration code #111 whereas our textual content coloration of #d8e0db interprets to a really gentle tan. You possibly can select no matter colours you want on your personal textual content, however make sure the colours distinction one another sufficiently to adjust to accessibility requirements.
Moreover, we’re utilizing the Main Mono Show font household. Similar to the background and textual content coloration, you can too select no matter font you’d like. Nonetheless, some fonts work higher than others with the typewriter impact.
Extra nice articles from LogRocket:
You might wish to select a clear sans-serif or monospaced font for the very best consequence. Additionally, you will notice that we’re setting a width in our @keyframes under. You might want to alter the width to accommodate any font you select to make use of and make sure the cursor blink animation works appropriately.
Creating the typewriter animation with CSS @keyframes and steps()
We’ll use CSS @keyframes to create an impact for each our strains of textual content. We would like all the textual content to be typed out in a letter-by-letter vogue, identical to a typewriter does:
@keyframes typewriter_1 {
from {
width: 0;
}
to {
width: 38rem;
}
}
@keyframes typewriter_2 {
from {
width: 0;
}
to {
width: 40rem;
}
}
The @keyframes guidelines are named typewriter_1 and typewriter_2 respectively. Every rule has two keyframes — from and to. The to keyframe makes use of rem , a scalable CSS unit that makes our design versatile, responsive, and accessible.
Within the typewriter_1 keyframe, we set the from width to 0 whereas to is about to 38rem. This ensures that when the textual content is proven letter by letter, our cursor will blink alongside it from width 0 at the beginning to width 38 on the finish of our textual content. Our typewriter_2 additionally has from and to widths set to 0 and 40rem, respectively.
Our @keyframes will create an animation the place the component progressively seems from left to proper, identical to a typewriter printing textual content.
To use this animation, embody it within the subtitle class selector utilizing the animation property. In our case, we might replace our div subtitle to the next:
.first_line {
border-right: 2px stable rgba(17, 17, 17, 0.9);
/* outline animation varieties for firstline */
animation: typewriter_1 6s
}
.second_line {
border-right: 2px stable rgba(17, 17, 17, 0.9);
/* outline animation varieties for econd_line */
animation: typewriter_2 5s
}
The animation is added alongside the animation velocity to disclose our textual content easily. Right here’s the consequence:
It doesn’t seem like the way in which we wish, proper? Bear in mind, our objective is to make it look the way in which a typewriter works — that’s, typing it out in a letter-by-letter vogue. To realize this, we’ll be making use of steps() CSS operate.
The steps() operate in CSS is used to specify the variety of intervals or steps in a timing operate. In our case, we’ll be utilizing it inside our animation property to permit our textual content to be displayed letter-by-letter:
.first_line {
border-right: 2px stable rgba(17, 17, 17, 0.9);
/* outline animation varieties for textual content + cursor */
animation: typewriter_1 6s steps(33) 1s 1 regular each;
}
.second_line {
border-right: 2px stable rgba(17, 17, 17, 0.9);
/* outline animation varieties for textual content + cursor */
animation: typewriter_2 5s steps(31) 1s 1 regular each;
}
Within the code above, you’ll discover the steps are 33 and 31 respectively. We acquired these numbers by counting the variety of characters that we now have in our textual content ourselves. checking the end in our browser:
Now it’s all coming collectively. Nonetheless, discover in our consequence that the cursor isn’t displaying or blinking. We would like the cursor to blink to make our typewriter animation look extra lifelike. Moreover, each strains of textual content seem concurrently, which isn’t the way in which a typewriter appears.
To repair this, we’ll additionally use @keyframes to create animations for every line’s cursor:
@keyframes first_cursor {
from {
border-right-color: rgba(17, 17, 17, 0.9);
}
to {
border-right-color: rgba(255, 255, 255, 0.8);
}
}
@keyframes second_cursor{
from {
border-right-color: rgba(17, 17, 17, 0.9);
}
to {
border-right-color: rgba(255, 255, 255, 0.8);
}
}
Within the code above, the border-right-color property settings of each our cursors will change from black to white as they transfer. This may give every of our cursors a blinking impact.
We’ll embody this contained in the animation properties for our textual content courses, setting every animation course property to infinite. This may make the cursor disappear and reappear each 780ms without end:
.first_line {
border-right: 2px stable rgba(17, 17, 17, 0.9);
/* outline animation varieties for textual content + cursor */
animation: typewriter_1 6s steps(33) 1s 1 regular each,
first_cursor 900ms steps(33) 8;
}
.second_line {
border-right: 2px stable rgba(17, 17, 17, 0.9);
/* outline animation varieties for textual content + cursor */
animation: typewriter_2 5s steps(31) 1s 1 regular each,
second_cursor 900ms steps(31) infinite;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
Within the code above, we added infinite to our second cursor animation since our textual content ends on the second line. This may make the cursor disappear and reappear each 900ms without end.
We additionally added a seven-second delay to the second_line so it doesn’t run concurrently our first line varieties and shows.
All finished! When testing the consequence within the browser, we must always now see the next:
Congrats! We simply made a typewriter animation impact utilizing solely CSS.
Be aware that you could comply with these similar steps should you solely need one line of textual content. The one distinction could be including infinite to the primary line’s animation, since there could be no second line. This may make sure the cursor blinks repeatedly on the finish of your single line. You additionally wouldn’t want so as to add a delay property as we did within the second line.
Conclusion
On this article, we checked out how we are able to use CSS to create a typewriter animation impact with no JavaScript in any respect. It’s straightforward to do that with simply fundamental HTML code and non-complex CSS syntax. Plus, it has no browser help points!
A typewriter animation impact on our web site will add curiosity and delight to our internet pages. Please share should you discovered this beneficial.
Is your frontend hogging your customers’ CPU?
As internet frontends get more and more complicated, resource-greedy options demand increasingly more from the browser. In case you’re fascinated by monitoring and monitoring client-side CPU utilization, reminiscence utilization, and extra for all your customers in manufacturing, strive LogRocket.
https://logrocket.com/signup/
LogRocket is sort of a DVR for internet and cellular apps, recording every thing that occurs in your internet app or web site. As a substitute of guessing why issues occur, you possibly can mixture and report on key frontend efficiency metrics, replay consumer classes together with utility state, log community requests, and routinely floor all errors.
Modernize the way you debug internet and cellular apps — Begin monitoring free of charge.
