Display word in HTML one after another rather than at once

I am writing a website where the following contents will be displayed on the page

"Hello there. My name is XYZ. I am doing this..."

What I want is that this should be displayed on the page continuously like first 0.1 seconds H then He then Hel etc. What is the html code for this?

I tried searching for the same - display text one after another in html but feel i am not able to search correctly.

If you want to use only html and css, then you can apply animation with animation-timing-function: steps();. But you need to know the number of letters, as well as wrap each one.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p {
  --letters: 47;
  --letter-width: .6em;
  --duration: 8s;
  font-family: monospace;
  white-space: nowrap;
  width: 0;
  overflow: hidden;
  animation: tape var(--duration) steps(var(--letters)) both;
  display: inline-flex;
}

span {
  width: var(--letter-width);
  flex: none;
}

@keyframes tape {
  to {
    width:calc(var(--letters) * var(--letter-width));
  }
}

<!-- language: lang-html -->

<p>
<span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span><span>.</span><span> </span><span>M</span><span>y</span><span> </span><span>n</span><span>a</span><span>m</span><span>e</span><span> </span><span>i</span><span>s</span><span> </span><span>X</span><span>Y</span><span>Z</span><span>.</span><span> </span><span>I</span><span> </span><span>a</span><span>m</span><span> </span><span>d</span><span>o</span><span>i</span><span>n</span><span>g</span><span> </span><span>t</span><span>h</span><span>i</span><span>s</span><span>.</span><span>.</span><span>.</span>

<!-- end snippet -->

P.S. Note that the proposed example still has some limitations. 😉