Typing effect using CSS

CSS is powerful, you can do a lot of things without JS, also it's important because it controls all design-related aspects of your website.

velocitybytes velocitybytes
Jun 6, 2021 - 10:07 Updated: Jul 23, 2021 - 08:10
0 119
Typing effect using CSS
Typing effect using CSS

Typography, colors, page layouts, and any other visual aspects of your website are all controlled by mighty CSS.

Let's see the typing effect without any JavaScript. Jump to the code!

<div class="container">
    <div class="type">
      This is one cool effect
    </div>
</div>

And a little bit of CSS...

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.type {
  width: 35%;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}
@keyframes typing {
  from {
    width: 0
  }
}
@keyframes blink {
  50% {
    border-color: transparent
  }
}

This is our result:

                 

Tags: