Table of Contents

PreviewHTMLCSSWrapping up

Typing Effect by using CSS

Jatin Sharma
Jatin Sharma
Dec 2, 2021
2 min read
220 words

As you may have already seen some website which has some kind of typing animation. It looks cool right but what if I tell you it is very easy to do and you can do it with just CSS only, not without using JS.

First of all, let's visualize what I am talking about -

Preview

preview

HTML

Now let's look at the code, how can we make that happen

index.html

<h1 class="typing">You had me at 'hello'.</h1>

HTML is very simple we just need to use only one element in order to make this work.

CSS

styles.css

/* Typing Class */
.typing {
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.15em;
  border-right: 0.15em solid orangered;
  animation: typing 3.5s steps(40, end) infinite, cursor-blink 0.75s step-end
      infinite;
}
 
/* The typing effect for the text */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
 
/* The cursor  blinking effect */
@keyframes cursor-blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orangered;
  }
}

Wrapping up

It is as simple as that, now you can use this in your projects wherever you want. You can also make that work with JS, but that's another story for another time.

Jatin's Newsletter

I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.

Share on Social Media: