Is there any possibility of transcitioning between two or more lines of text using a typewrite effect based on CSS keynotes? In annex the css with the keynotes and a basic line of html linked to it.
.typecontainer {
width: 960px;
margin: 50px auto;
}
.h7 {
font-family: 'Inconsolata', monospace;
font-size: 34px;
color: dimgray;
white-space: nowrap;
overflow: hidden;
width: 100%;
margin: 10px 0;
animation: typing 4s steps(60) infinite alternate;
}
.h7:nth-child(2) {
animation: typing-2 8s steps(60) infinite alternate;
}
@keyframes typing {
from {width: 0;}
}
@keyframes typing-2 {
0% {width: 0;}
50% {width: 0;}
100% {width: 100;}
}
@keyframes blink {
to {opacity: .0;}
}
.cursor {
animation: blink 1s infinite;
}
.heart {
color: #ff7bac;
} <div class="typecontainer h7"><p class="h7">First<span class="cursor">|</span><</p>