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;
  }
}
```
You can achieve this with `transform: scaleX(n)` where n transitions from 0 to 1:

```css
.title-text{
    white-space: nowrap;
    overflow: hidden;
    animation: typing .4s steps(40) 0s 1 normal both;
    display:inline-block;
    transform-origin:left;
}

@keyframes typing{
    from{
        transform: scaleX(0);
    }to{
        transform: scaleX(1)
    }
}
```

```html
<div class="title-text">This is the title</div>
```