I've created an animation that types out:
"[Your Name] blah blah"
with a typing effect. Now, I want the cursor to move to the next line and type out:
"[Your Father Name] blah blah"
I attempted to add <br>, but it types out both lines simultaneously instead of one after the other.
.typewriter h1 {
color: black;
font-family: monospace;
overflow: hidden; /* Ensures content isn't revealed until animation */
border-right: .15em solid orange; /* Typewriter cursor */
white-space: nowrap; /* Keeps content on single line */
margin: 0 auto; /* Provides scrolling effect as typing occurs */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* Typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* Typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}<div class="typewriter" class="username">
<h1>
[Your Name] blah blah
</h1>
</div>