эффект пишущей машинки css, показывает весь текст, затем запускает эффект

Question

Поскольку мой заголовок - это все, что нужно вот мой HTML-код:

    <div class="line typewriter">
<h1> My name </h1>
<h4>Data Scientist | Environmental Enthusiast | &nbsp Traveller</h4>
</div>

и мой код CSS:

.line {
  /* position: relative; */
  top:50%;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;transform: translateY(~50%);
}


.typewriter {
  animation: type 7s steps(35, end) 0.5s, 
  blinkTextCursor 500ms steps(10) infinite normal;
  /* overflow: hidden;
  white-space: nowrap; */
}

@keyframes type {
  from {
    width:0%;
  }
  to {
    width: 100%;
  }
}

Кроме того, мой писатель не выглядит гладким, как мне сделать его более плавным?

Answer 1

Это будет соответствовать содержанию. Попробуй это:

.typewriter{
   position:relative;
   display: inline-block;
 }

.typewriter h4 {
  color: #000;
  font-family: monospace;
  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;
}


/* The typing effect */

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


/* The typewriter cursor effect */

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

<div class=" typewriter">
  <h4>Data Scientist | Environmental Enthusiast | &nbsp Traveller</h4>
</div>