Having a website without animation is like having a pizza without cheese. Nowadays one of the most crucial elements for your website is a slight touch of animations, just so it doesn’t go dry.
Now there are a lot of ways that enable you to animate your webpage but one of the most common ones is to animate via adding a CSS typing effect to words that not only give an organized look to your content but also give an aesthetic touch to your text.
How to Create a Simple CSS Typing Effect?
Now if you are confused about where to start don’t worry we have got you covered on that.
Here we are gonna start with the very first HTML typewriter effect animation and then there is a list of 8 more complex ones that you can feel free to use!
Ready? Then let’s get started with the basic HTML and CSS of the effect!
First of all, in HTML define a <div> and give it the class name of “typewriter” and then type the content in the <h1> tag that you need to get the effect on.
<div class="typewriter">
<h1>Create a simple typewriter.</h1>
</div>Adjust the border and the margin of the typewriter accordingly. Next, assign the “White-space” to “nowrap” and “overflow” to “hidden” This will help your content to stay in a format. Once that is done add animation along with the time duration for the animation to complete.
For the final touches add the typewriter cursor effect giving its border color from being transparent.
Now here we are going to discuss 8 of the finest typing effects that you can use to give your text an elegant finish.
.typewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typewriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}Simple Typewriter + Blinking Cursor = Simply Simple
One of the simplest forms of animation that is currently available to use is this one. It is created using CSS and gives the text a simple finish. The code of this animation is explained below.
In HTML, define a <div> tag and give it the class name of “typingEffect1”. Once the class is defined it can be used and the content is to be written in between the <div> tags.
<div class="typingEffect1">
Write Your own text here
</div>Firstly, you need to define the basics. Once you are done with the basics, adjust the color and position of the text via width. Now it’s all set now you just need to add the blinking cursor.
For the blinking cursor add animation as shown, you may edit if you want to change the speed of the blinking cursor and to add cherry on top add keyframes as they enable the cursor to stay at one position and blink.
.typingEffect1 {
font-family: lato;
font-size: 22px;
font-weight: 400;
color: #312e2e;
width: 250px;
white-space: nowrap;
overflow: hidden;
border-right: 5px solid #d22960;
animation: types 4s steps(30, end), cursorblink 1s step-end infinite;
}
@keyframes types {
from { width: 0; }
to { width:250px; }
}
@keyframes cursorblink{
from, to {border-color: transparent}
50%{ border-color:#d22960}
}CSS Typing Erase Effect
If you are looking for something to be catchy to the user’s eye this font is just the perfect match for you as it has an effect that catches the attention of the user and engages them out of curiosity. The code of this animation is explained below.
In HTML, create a <div> and give it the class name of “typingEffect2” and data-text will be defined as “typing Animation css”. The data-text attribute allows us to store extra information on standard, semantic HTML elements without other hacks.
<div class="typingEffect2" data-text="Typing Animation css">
Typing Animation css
</div>Firstly, define the position of the original text by using position property. Add margin, padding along with the text-transform property which enables you to capitalize a text element.
The second part enables you to define the text before it undergoes the animation. Simply copy-paste the code and you are good to go as it will set everything to defaults whereas if you want to, you may change the animation time duration while the font size and weight can also be edited accordingly.
Add keyframes to finish it off as shown in the code, the keyframes enable the cursor to move with the text. Finally, add the animated text in the end by copy-pasting the final part of the code.
.typingEffect2 {
position: absolute;
left: 16.5%;
top: 77%;
transform: translate(-50%, -50%);
text-transform: uppercase;
margin: 0;
padding: 0;
letter-spacing: 5px;
color: transparent;
}
.typingEffect2::before {
content: attr(data-text);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
color: #782525;
overflow: hidden;
border-right: 5px solid #782525;
animation: type 10s steps(18) infinite;
white-space: nowrap;
font-size: 22px;
font-family: lato;
font-weight: 400;
text-transform: capitalize;
}
@keyframes type {
0%{
width:0%;
}
50%{
width:100%;
}
100%{
width:0%;
}
}
/*****animated text End*****/
@-webkit-keyframes bg-animation {
0% {
background-position: top;
}
50% {
background-position: bottom;
}
100% {
background-position: top;
}
}
@keyframes bg-animation {
0% {
background-position: top;
}
50% {
background-position: bottom;
}
100% {
background-position: top;
}Multiline Typewriter Effect
What if you wanna write something lengthy or something that can vary from 2-3 lines? Then this multiline typewriter is the best for your content as it enables you to give a line-by-line effect to your text from the heading till the end and keeps the reader engaged with the content.
TIn HTML, the <h1> tag will have the “heading” of the content and the class of this tag is named “typingEffect3”, whereas the rest of the text will be written in different <p> tags and will be given the same class name of “typingEffect3”.
<h1 class="typingEffect3">This is a big title</h1> <p class="typingEffect3">Some paragraph here</p> <p class="typingEffect3">Some paragraph here</p>
Firstly, define the basics of the heading of your content.
The next thing after getting done with the basics is to set the “overflow” property to “hidden” and “white-space” property to “nowrap” as it keeps the text as you type and doesn’t change the lines. Make sure that the animations of heading and paragraphs are not synchronized as they have a delay effect making the user curious.
Once you have added animations for both the paragraphs and headings, add keyframes to the paragraphs and headings as if enabling the cursor to move as shown in the code.
h1.typingEffect3 {
font-size: 36px;
color: #8e8484;
line-height: normal;
}
.typingEffect3{
overflow:hidden;
white-space:nowrap;
width:8em;
-webkit-animation: type 2s steps(15), blink 1s linear infinite;
margin:0;padding:0;
border-right: 1px solid;
}
.typingEffect3:nth-child(2){
width:10.5em;
-webkit-animation: type2 4s steps(19), blink 1s linear infinite;
}
.typingEffect3:nth-child(3){
width:10.5em;
-webkit-animation: type2 8s steps(19), blink 1s linear infinite;
}
@keyframes type{
from{width:0}
}
@keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}
@keyframes blink{
0%,100%{border-color:transparent}
50%{border-color:black}
}The One without the Cursor
This effect is one of the mysterious ones as it doesn’t have a cursor. Within the blink of an eye you have a text right in front of you and you can’t figure out where it came from. Now as creepy as it sounds as fun it is.
In HTML, the <div> tag will be defined and will be given the class name of “typingEffect4”. The content that needs the animation effect will be written in the <div> tag.
<div class="typingEffect4">
Text Typing Animation
</div>Start by defining the animation type and the time it will take for the text to appear on the screen as shown in the code. Then set overflow to hidden and white space to no-wrap as it enables you to keep the text in formatted line.
Finally, keyframe the animation so that the text pops out in the correct order.
.typingEffect4 {
animation: ctype 3s steps(21);
overflow: hidden;
white-space: nowrap;
font-family: consolas;
width: 22ch;
}
@keyframes ctype {
0% {
width: 0ch;
}
100% {
width: 21ch;
}
}Styling with Cursor Along
This is one of the most stylish animation effects that you can use. This not only gives a firm look on the text but a fancy finishing is all that you will need. The cursor moves along with the text as it displays.
In HTML, a <div> tag is used with the class name of “typingEffect5”. The text that needs the animation is written in this <div> and another <div> is defined with the class name of “borderstyle” which is used to animate the cursor as it moves along the text.
<div class="typingEffect5">
Hey! I am a typewriter effect.
<div class="borderstyle"></div>
</div>The first thing is to add basic animations to both the class names so that the text and cursor appear at the same time. Add animation to the text and cursor via keyframes.
Lastly, add cursor and text animations to the final product as shown in the code using key frames. This will enable the text and cursor animation to move in a synchronous format.
.typingEffect5 {
height: 40px;
white-space: nowrap;
overflow: hidden;
font-family: "Source Code Pro", monospace;
font-size: 28px;
color: rgba(142, 43, 43, 0.7);
position: relative;
}
.borderstyle {
border-bottom: solid 3px rgba(251, 12, 12, 0.93);
position: absolute;
right: -7px;
width: 20px;
}
/* Animation */
.typingEffect5 {
animation: animated-text 2s steps(30, end) 1s 1 normal both;
}
.borderstyle {
animation: animated-cursor 600ms steps(30, end) infinite;
}
/* text animation */
@keyframes animated-text {
from {
width: 0;
}
to {
width: 515px;
}
}
/* cursor animations */
@keyframes animated-cursor {
from {
border-bottom-color: rgba(251, 12, 12, 0.93);
}
to {
border-bottom-color: transparent;
}
}
/* Animation */
.typingEffect5 {
animation: animated-text 2s steps(30, end) 1s 1 normal both;
}
.borderstyle {
animation: animated-cursor 600ms steps(30, end) infinite;
}
/* text animation */
@keyframes animated-text {
from {
width: 0;
}
to {
width: 515px;
}
}
/* cursor animations */
@keyframes animated-cursor {
from {
border-bottom-color: rgba(251, 12, 12, 0.93);
}
to {
border-bottom-color: transparent;
}The Smooth Typing Effect
If you are looking for a smooth transition for your text then this is just the animation effect you need on your text. This animation has a text and cursor appearing on the screen at the same time but with a slow and smooth effect.
In HTML, create a <div> and give it a class name, in this case it’s “typingEffect6” and write the content that is gonna have the animation effect in the <div>
<div class="typingEffect6">
I am very smooth typewriter
</div>Now in CSS, use the class name and define the basics of the code along with the border, whitespace and overflow as shown in the code.
Then add the animation effect on the text and the cursor just so that both the text and the cursor come out just perfectly timed and aligned and most importantly smoothly together.
We are gonna use keyframes to adjust the animations while the text with width property. The cursor animation (comment) is used to make sure that the cursor moves from left to right smoothly and ends up blinking after the text.
.typingEffect6 {
border-right: solid 5px rgba(175, 183, 89, 0.7);
white-space: nowrap;
overflow: hidden;
font-family: "Source Code Pro", monospace;
font-size: 28px;
color: rgba(175, 183, 89, 0.7);
}
/* Animation */
.typingEffect6 {
animation: animated-text-effect 4s linear 1s 1 normal both,
animated-cursor 600ms linear infinite;
}
/* text animation */
@keyframes animated-text-effect {
from {
width: 0;
}
to {
width: 456px;
}
}
/* cursor animations */
@keyframes animated-cursor {
from {
border-right-color: rgba(175, 183, 89, 0.7);
}
to {
border-right-color: transparent;
}
}The Multi-Words Effect
So let’s say you have tried all the effects and found none of them useful, then this effect will surely get the job done for you. This effect has the tendency to have multiple words back to back giving a catchy look to the text.
In HTML, the <p> will be defined and will be given a class name, i.e. “typingEffect7” in this case. This <span> tag will be used and will be given a class name, i.e. “te7-item” and “te7-item_inner” in this case.
This <span> tag will be used multiple times (As many times you need to change the animation) and will have the same class name.
The text will be added in the <span> tag accordingly as shown in the code, after the class is defined the <p> tag will be closed.
<p class="typingEffect7"> <span class="te7-item"><span class="te7-item_inner">CSS3</span></span> <span class="te7-item"><span class="te7-item_inner">JavaScript</span></span> <span class="te7-item"><span class="te7-item_inner">HTML5</span></span> </p>
In CSS, the class name of the span tag and the div tags both will be used, the basics will be defined as shown in the code. The next thing after defining the basics is to define the position of the text that is gonna get overlayed by using the “overlay” property.
Add animation of text appearing and disappearing as shown in the code. The item-overlay before and after is defined is in the code, you may copy-paste it or edit it accordingly.
To finish it off, add keyframes for the text so that it appears and disappears with the cursor.
.typingEffect7,
.te7-item {
display: block;
font-weight: 400;
}
/*The good stuff*/
.typingEffect7,
.te7-item {
height: 80px;
}
.typingEffect7 {
font-family: "Fira Mono", monospace;
overflow: hidden;
background-color: #d9d2d1;
color: #343aa1;
font-size: 28px;
margin: 0;
}
.te7-item {
position: relative;
font-size: 1.5em;
animation: animatetotop 6s steps(3) infinite;
}
.te7-item_inner,
.te7-item-overlay {
display: inline-block;
}
.te7-item_inner {
position: relative;
line-height: 1;
}
.te7-item_inner:after {
content: "";
position: absolute;
top: -1px;
right: 0;
bottom: -2px;
left: 0;
border-left: 1px solid #343aa1;
background-color: #d9d2d1;
animation: animatetoright 1s steps(10) infinite alternate;
}
@keyframes animatetoright {
0% {
left: 0;
margin-right: auto;
}
100% {
left: 100%;
margin-left: 0.6em;
margin-right: -0.6em;
}
}
@keyframes animatetotop {
0% {
top: 0;
}
100% {
top: -240px;
}
}The Multi-line Effect
If you liked the multiple paragraph effect then this one is just better than this as it has the same effect but even smoother and better. The basic HTML and CSS of the animation is briefly described below.
In HTML, use the <div> tags and define a class along with <p> tags. Once that is done write the text you want to animate in the <p> tags.
<div class="typingEffect8"> <p>Typed text 1</p> <p>Typed text 2 Longer</p> <p>Typed text 3</p> </div>
In CSS, the code above has everything from defining the basic borders to animating the text smoothly line by line. The code enables the text to appear line by line.
The end part of the CSS shows that the last text will appear letter by letter till the end of the line while the keyframes enable the cursor to blink smoothly.
.typingEffect8 p {
border-right: 0.15em solid orange;
font-family: "Courier";
font-size: 14px;
white-space: nowrap;
overflow: hidden;
}
.typingEffect8 p:nth-child(1) {
width: 7.3em;
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.typingEffect8 p:nth-child(2) {
width: 11.5em;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.typingEffect8 p:nth-child(3) {
width: 7.3em;
opacity: 0;
-webkit-animation: type3 5s steps(20, end),
blink 0.5s step-end infinite alternate;
animation: type3 5s steps(20, end), blink 0.5s step-end infinite alternate;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.15em solid orange;
}
100% {
border: none;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 0.15em solid orange;
}
100% {
border: none;
}
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 0.15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
@-webkit-keyframes blink {
50% {
border-color: tranparent;
}
}Final Words
In this article, we have discussed a list of top 8 animation effects that you can use only via HTML & CSS implication. Now it’s worth mentioning that you shouldn’t rely on these animations too heavily but just to create an extra delight while leaving an engaging & long-lasting impression on the audience.
This was it for today. Will see you tomorrow with some more crazy tutorials. So stay tuned!