Мой css код анимации не работает гладко

Question

Здравствуйте! Я хочу иметь плавную анимацию ввода в css, но мой код не работает гладко. Мой текст внезапно появляется на экране. Вот мой css код:

.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;
    }
}

Заранее спасибо

Answer 1

Вы должны передать указанную c ширину. Похоже, что fit-контент не работает.

.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

Может быть, вы можете попробовать это:

.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>

Answer 3

Этого можно добиться с помощью transform: scaleX(n), где n переходит от 0 к 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

Попробуйте этот код

.title-text{

    white-space: nowrap;
    overflow: hidden;
    animation: typing 1s steps(40) 1s 4 normal both;

}
@keyframes typing{
    from{
        width: 0;
    }to{
        width: 100px;
    }
}