My css animation code does not work smoothly - css

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 1

You have to pass specific width. The fit-content seems to be not working.
.title-text {
white-space: nowrap;
overflow: hidden;
animation: typing 4s steps(40) 1s 1 normal both;
}
#keyframes typing {
from {
width: 0;
}
to {
width: 200px;
}
}

Answer 2

Try this code
.title-text{
white-space: nowrap;
overflow: hidden;
animation: typing 1s steps(40) 1s 4 normal both;
}
#keyframes typing{
from{
width: 0;
}to{
width: 100px;
}
}

Answer 3

You can achieve this with transform: scaleX(n) where n transitions from 0 to 1:
.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)
}
}
<div class="title-text">This is the title</div>

Answer 4

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>