css typewriter effect, shows all text then starts the effect

Question

Since my title is all there is to ask, here is my html code:

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

and my css code:

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

Also my text-writer does not look smooth, how can I make it smoother?

Answer 1

It will go along as per content. Try this:

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