Question: Hello I want to have smooth typing animation in css but my code doesn't work smoothly
My text just appears on the screen suddenly
Here's my css code:

```
.title-text {
    white-space: nowrap;
    overflow: hidden;
    animation: typing 4s steps(40) 1s 1 normal both;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: fit-content;
    }
}

```

Thanks in advance

Answer: 
You have to pass specific width. The fit-content seems to be not working.

```css
.title-text {
  white-space: nowrap;
  overflow: hidden;
  animation: typing 4s steps(40) 1s 1 normal both;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 200px;
  }
}
```
Maybe you can try with this:

```
.title-text h1 {
     overflow: hidden;
     border-right: .15em solid orange;
     white-space: nowrap;
     margin: 0 auto;
     letter-spacing: .15em;
     animation: 
        typing 3.5s steps(30, end),
        blink-caret .5s step-end infinite;
 }

 @keyframes typing {
    from { width: 0 }
    to { width: 100% }
 }

 @keyframes blink-caret {
     from, to { border-color: transparent }
     50% { border-color: orange }
 }

```

HTML:

```
<div class="title-text">
  <h1>This is a Heading.</h1>
</div>

```