How to Add Typing Effect in CSS

If you want to add a typing effect to your web page, you can do so by using CSS. Adding a typing effect to text in CSS is easy; you just need to use the animation property. The animation property allows you to define a sequence of keyframes that will be used to create an animation. You can use this property to create animations for all sorts of things, including text effects.

We will combine blinking and width animation to create our typing effect. We will also use the animation-delay property to add a delay between each letter. This way, it will look like the text is being typed out.

To add a typing effect to text, you can use the following code:

<div class="typing-wrapper">
  Typerwriter is typing.
</div>
<style type="text/css">

.typing-wrapper {
  width: 220px;    
  overflow: hidden;
  border-right: 2px solid red;  
  font-size: 24px;
  white-space: nowrap;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
}

@keyframes typing {
  from {
    width: 0;
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent;
  }
}
</style>