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>