haneulkim
haneulkim

Reputation: 4928

css typewriter effect, shows all text then starts the effect

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?

Upvotes: 2

Views: 224

Answers (1)

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

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>

Upvotes: 3

Related Questions