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:

Typerwriter is typing.

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close