how to do typewriter effect with line break with only css and html?
im making a personal site and am trying out stuff to make certain elements in which i want on my website and i was intrigued by css animations and i wanted to do a typewriter in two lines
but there are three things wrong :
• the text doesnt complete (instead of dylxntn it becomes dylxn and programmer becomes program for some reason)
• the timing isnt right, i cant get the timing right
• the second line deletes then rewrites itself instead of just writing itself
and these things are the only things i know are wrong, there could be something i didnt know about.
.css-typing h1{
overflow: hidden;
white-space: nowrap;
border-right: 4px solid rgb(255, 255, 255);
width: 11ch;
animation: type 3s steps(11, end);
-webkit-animation: type 3s steps(11, end);
animation-iteration-count: infinite;
}
@keyframes type{
0% {
width: 0ch;
}
20% {
width: 11ch;
}
}
.css-typingtwo h1{
overflow: hidden;
white-space: nowrap;
border-right: 4px solid rgb(255, 255, 255);
width: 16ch;
animation: type2 3s steps(16, end);
-webkit-animation: type2 3s steps(16, end);
animation-iteration-count: infinite;
}
@keyframes type2{
40% {
width: 16ch;
}
80% {
width: 1ch;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="black">
<div class="css-typing">
<font color="white"><h1>I'M <font color="red">DYLXNTN</font></h1></font>
</div>
<div class="css-typingtwo">
<font color="white"><h1>I'M A PROGRAMMER</h1></font>
</div>
</body>
</html>