DEV Community

Cover image for Typing Effect by using CSS
Jatin Sharma
Jatin Sharma

Posted on • Edited on

Typing Effect by using CSS

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

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

HTML



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


Enter fullscreen mode Exit fullscreen mode

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

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;
  }
}


Enter fullscreen mode Exit fullscreen mode

codepen

Conclusion

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.

You can now extend your support by buying me a Coffee.😊👇
buymecoffee

Also Read

Top comments (9)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
j471n profile image
Jatin Sharma

Nah mate, it's not marquee.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
j471n profile image
Jatin Sharma

Exactly, LoL

Collapse
 
mohammedriyan profile image
Mohammed-Riyan

I couldn't see marquee tag? where is it?
Jatin you are doing good keep it up. Thank you.

Collapse
 
j471n profile image
Jatin Sharma

Thanks mate. :)

Collapse
 
wdrfree profile image
wdrfree

great

Collapse
 
alinehouston profile image
AlineHouston

Wow it's so fluent I will also try to make it . islamic taweez for love

Collapse
 
me_suryan profile image
Suryan S

Awesome bro