CSS Typing Effect - html

Question

I'm trying to achieve a typing effect with multiple lines in CSS.
This was a good reference point I followed:
CSS animated typing
https://css-tricks.com/snippets/css/typewriter-effect/
Now my desired effect is that the first border-right's visibility be hidden once the first blinking cursor's animation ends. A the border-right is still on screen after the animation ends and I want it not to be visible. (As if enter button on a keyboard was pressed.) How would I go about that?
https://jsfiddle.net/6567onn8/5/
.typewriter h1 {
text-align: center;
overflow: hidden;
font-size: 100%;
border-right: .15em solid #fff;
white-space: nowrap;
/* keeps content in one line */
letter-spacing: .15em;
animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter h2 {
font-size: 100%;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid black;
-webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
-webkit-animation-delay: 3s;
-webkit-animation-fill-mode: both;
-moz-animation: typing 2s steps(26, end), blink-caret 1s step-end infinite;
-moz-animation-delay: 3s;
}
/* The typing effect */
#keyframes typing {
from {
width: 0
}
to {
width: 9em;
}
}
#keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: #000;
}
}
<div class="typewriter">
<h1>Hi. I'm Andy.</h1>
<h2>I love learning.</h2>
</div>

Answer 1

Just take out infinite
.typewriter h1 {
text-align: center;
overflow: hidden;
font-size: 100%;
border-right: .15em solid #fff;
white-space: nowrap;
/* keeps content in one line */
letter-spacing: .15em;
animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter h2 {
font-size: 100%;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid black;
-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;
}
/* The typing effect */
#keyframes typing {
from {
width: 0
}
to {
width: 9em;
}
}
#keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: #000;
}
}
<div class="typewriter">
<h1>Hi. I'm Andy.</h1>
<h2>I love learning.</h2>
</div>

Answer 2

body{
margin: 0;
font-family: 'Pacifico', cursive;
}
.blackboard-wrapper {
width: 100vw;
height: 100vh;
background-image: repeating-linear-gradient(to bottom,#26180B 70%,#362418 77%,#77736A 78%,#655444 78%);
}
.black-board {
height: 360px;
width: 800px;
transform: translateY(70px);
margin: 0 auto;
background-image: repeating-linear-gradient(to bottom,#000000 77%,#111111 78%,#222222 77%,#000000 78%);
border-width: 15px;
border-style: groove;
border-color: #2E1E11;
position: relative;
color: #ffffff;
}
.date {
position: absolute;
left: 15px;
top: 10px;
}
.date > span {
display: block;
margin-bottom: 5px;
}
.black-board::before {
position: absolute;
left: 0;
content: "";
right: 0;
background-color: #afafaf;
height: 2px;
top: 94px;
}
.topic {
position: absolute;
top: 28px;
left: 50%;
transform: translateX(-50%);
text-decoration: underline;
word-spacing: 8px;
}
.writing {
position: absolute;
top: 120px;
left: 15px;
right: 15px;
bottom: 15px;
}
.writing::after,
.writing::before {
position: absolute;
letter-spacing: 2px;
font-size: 30px;
animation-name: write;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.7,.45,.97,.36);
}
.writing::before{
font-size: 25px;
content:"This is cool NAAA???";
top: 70px;
color: #1FBEA6;
animation-name: write2;
animation-duration: 2s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.7,.45,.97,.36);
}
#keyframes write{
0%{content:"";}
3%{content:"V_";}
6%{content:"VI_";}
9%{content:"VIK_";}
12%{content:"VIKA_";}
15%,25%{content:"VIKAS";}
28%{content:"VIKA_";}
31%{content:"VIK_";}
34%{content:"VI_";}
37%{content:"V_";}
40%,50%{content:"";}
53%{content:"P_";}
56%{content:"PA_";}
59%{content:"PAT_";}
62%{content:"PATE_";}
65%,75%{content:"PATEL";}
78%{content:"PATE_";}
81%{content:"PAT_";}
84%{content:"PA_";}
88%{content:"P_";}
91%,100%{content:"";}
}
#keyframes write2{
0%{content:"";}
5%{content:"T_";}
10%{content:"Th_";}
15%{content:"Thi_";}
20%{content:"This_ ";}
25%{content:"This i_";}
30%{content:"This is_";}
35%{content:"This is_ ";}
40%{content:"This is c_";}
45%{content:"This is co_";}
50%{content:"This is coo_";}
55%{content:"This is cool_";}
65%{content:"This is cool N_";}
70%{content:"This is cool NA_";}
75%{content:"This is cool NAA_";}
80%{content:"This is cool NAAA";}
85%{content:"This is cool NAAA?";}
90%{content:"This is cool NAAA??";}
95%{content:"This is cool NAAA???";}
100%{content:"This is cool NAAA???";}
}
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<div class="blackboard-wrapper">
<div class="black-board">
<div class="date">
<span>DATE</span>
<span>25|oct|2018</span>
</div>
<div class="topic">TYPING EFFECT USING CSS</div>
<div class="writing"></div>
</div>
</div>
https://codepen.io/Vikaspatel/pen/mzarrO

Answer 3

.wrapper {
height: 100vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 22ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
<div class="wrapper">
<div class="typing-demo">
This is a typing demo.
</div>
</div>
Easiest way of doing it in CSS.