'Typewriting effect for multiple lines of text CSS

I am trying to obtain the typewriting animation effect using CSS.

(Reference: https://css-tricks.com/snippets/css/typewriter-effect/)

I am trying to work out the effect for multiple lines of text and want to know how I can remove the cursor from the first line before the second line is typed?

The code is mentioned below.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
  }

.container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#hero {
    background-image: url(bg.png);
    background-size: cover;
    background-position: top center;
    position: relative;
    z-index: 1;
}
.typewriter h1 {
    color: #fff;
    font-family: monospace;
    overflow: hidden;
    font-size: 80px;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    /* keeps content in one line */
    letter-spacing: .15em;
    animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
  }
  .typewriter h2 {
    color: #fff;
    font-family: monospace;
    font-size: 40px;
    white-space: nowrap;
    overflow: hidden;
    border-right: .15em solid orange;
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end;
    -webkit-animation-delay: 3s;
    -webkit-animation-fill-mode: both;
    -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end;
    -moz-animation-delay: 3s;
  }

  @keyframes typing {
    from { width: 0 }
  to { width: 100% }
}
  @keyframes blink-caret {
    from, to {
      border-color: transparent
    }
    50% {
      border-color: orange;
    }
  }

  <section id="hero">
    <div class="hero container">
      <div class="typewriter">
        <h1>Hello, <span></span></h1>
        <h2>This is XYZ<span></span></h2>
     </div>
    </div>
  </section>
htmlcss


Solution 1:[1]

Add animation delay:3s on h2 and make blink-caret animation in h1 repeat for 4 times and not infinite and it will work;)

Solution 2:[2]

Here is an example using Javascript that I forked and tweaked from https://codepen.io/stevn

Everything sits inside a pre tag so it works with newlines and indents. Putting multiple <span></span> tags are treated as a pause - this can be tweaked on the line tempTypeSpeed = (Math.random() * typeSpeed) + 50; <-- the last integer there.

    function setupTypewriter(t) {
        var HTML = t.innerHTML;

        t.innerHTML = "";

        var cursorPosition = 0,
            tag = "",
            writingTag = false,
            tagOpen = false,
            typeSpeed = 100, // higher number = slower
        tempTypeSpeed = 0;

        var type = function() {
        
            if (writingTag === true) {
                tag += HTML[cursorPosition];
            }

            if (HTML[cursorPosition] === "<") {
                tempTypeSpeed = 0;
                if (tagOpen) {
                    tagOpen = false;
                    writingTag = true;
                } else {
                    tag = "";
                    tagOpen = true;
                    writingTag = true;
                    tag += HTML[cursorPosition];
                }
            }
            if (!writingTag && tagOpen) {
                tag.innerHTML += HTML[cursorPosition];
            }
            if (!writingTag && !tagOpen) {
                if (HTML[cursorPosition] === " ") {
                    tempTypeSpeed = 0;
                }
                else {
                    tempTypeSpeed = (Math.random() * typeSpeed) + 50;
                }
                t.innerHTML += HTML[cursorPosition];
            }
            if (writingTag === true && HTML[cursorPosition] === ">") {
                tempTypeSpeed = (Math.random() * typeSpeed) + 50;
                writingTag = false;
                if (tagOpen) {
                    var newSpan = document.createElement("span");
                    t.appendChild(newSpan);
                    newSpan.innerHTML = tag;
                    tag = newSpan.firstChild;
                }
            }

            cursorPosition += 1;
            if (cursorPosition < HTML.length - 1) {
                setTimeout(type, tempTypeSpeed);
            }

        };

        return {
            type: type
        };
    }

var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();
h1, h2 {
  margin: 0;
  display: inline-block;
  padding-left: 20px;
}

#typewriter {
  font-size: 2em;
  margin: 0;
  font-family: "Courier New";
}
#typewriter:after {
  content: "|";
  font-size: 2em;
  font-family: "Courier New";
  color: black;
  -webkit-animation: blink 500ms linear infinite alternate;
          animation: blink 500ms linear infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<pre id="typewriter">
<h1>Hello,</h1>
<span></span>
<span></span>
<h2>This is XYZ</h2></pre>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Web Assembler

Related Questions