Hello!
I've added in a code block and custom css for the typewriter effect on a 2 line statement. However i'm running into the issue where the second line stays visible in the beginning, the text types out for line 1 and then it will type it out for line 2. I'd like line 2 to remain hidden and actually flow like it is being typed out after line 1 has been typed.
PW is Nolan.
Here is the CSS code I used:
.typewriter p {
white-space: nowrap;
overflow: hidden;
}
.typewriter p:nth-child(1) {
/*If you are having problems with text clipping change the width from 16em to a higher value*/
width: 23em;
-webkit-animation: type 5s steps(40, end);
animation: type 5s steps(40, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.typewriter p:nth-child(2) {
/*If you are having problems with text clipping change the width from 13.5em to a higher value*/
width: 23em;
opacity: 0;
-webkit-animation: type2 5s steps(40, end);
animation: type2 5s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes type {
0% {
width: 0;
}
100% {
border: none;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
100% {
border: none;
}
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 0;
border: none;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 0;
}
100% {
opacity: 0;
border: none;
}
}
.typewriter {color:#2b2b2b;
font-size: 18px;
line-height: 18px;
padding-top: 20px
}
