CODEWITHSUNDEEP
htmlcss
Seep Sooo
Seep Sooo

Reputation: 145

typewriter effect in css not going to next line

I have a typewriter effect in CSS for my below text:

these words are in two-line, I have the following code for typewriter effect

.typewriter h1 {
  color: #333;
  font-family: monospace;
  overflow: hidden;
  /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #ff5d22;
  /* The typwriter cursor */
  white-space: nowrap;
  /* Keeps the content on a single line */
  margin: 0 auto;
  /* Gives that scrolling effect as the typing happens */
  /* Adjust as needed */
  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">
  <h1>Professional, Creative, Flexible, Scalable Workspace</h1>
</div>

Now the problem is, the typewriter is only working in the first line, it's not going to the second line, can anyone please tell me what is wrong with my code?

Upvotes: 0

Views: 1800

Answers (1)

Ranjith v
Ranjith v

Reputation: 1062

try like this.. this way of css. or you must add js

html

<div class="container">

  <p class="typing">
    This paragraph of text will be animated with a "typewriter" style effect, and it will continue to work even if it splits across multiple lines.  Well, in this case, up to a maximum of 5 lines, but you get the picture.
  </p>

  <div class="hiders">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>

</div>

css

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

}

.container {
  position: relative;
  font-family: Consolas, monospace;  
}

.typing {
  position: absolute;
  top: 0;
  margin: 0;
  z-index: -1;
}

.hiders {
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.hiders p {
  position: relative; 
  clear: both; 
  margin: 0;
  float: right; /* makes animation go left-to-right */
  width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */
  background: white; /* same as page background */
  animation: typing 2s steps(30, end);
  animation-fill-mode: both;  /* load first keyframe on page load, leave on last frame at end */
}

.hiders p:nth-child(2) {
  animation-delay: 2s;
}
.hiders p:nth-child(3) {
  animation-delay: 4s;
}
.hiders p:nth-child(4) {
  animation-delay: 6s;
}
.hiders p:nth-child(5) {
  animation-delay: 8s;
}

Upvotes: 1

Related Questions