Is there a way to slowly add letters to text by css? [closed]

by

You can consider animating the maximum width of a span like below.

.slow {
  display: inline-block;
  vertical-align: bottom;
  max-width: 0.5rem;
  overflow: hidden;
  animation: slow 2s ease forwards;
}

@keyframes slow {
  from {
    max-width: 0.5rem;
  }
  to {
    max-width: 3rem;
  }
}
<span>Sl</span><span class="slow">oooooo</span><span>w</span>

Leave a Comment