I am trying to get the 2 images that are in front of and behind the typing text animation to slide/expand as the text is being typed out instead of being static at its final width. I don't have much experience with it and can't really find similar cases online
#mainVisual {
width: 100%;
height: 700px;
background: url(../img/mainslide03.jpg) no-repeat center center / cover;
}
.slide-txt {
width: 100%;
height: 300px;
position: relative;
}
.slide-1 {
position: absolute;
top: 300px;
left: 240px;
}
.slide-2 {
position: absolute;
top: 300px;
left: 590px;
}
.typing-txt {
width: 300px;
animation: typing 3s steps(20), blink .3s step-end infinite alternate;
text-transform: uppercase;
white-space: nowrap;
margin-left: 280px;
color: rgb(152, 197, 49);
overflow: hidden;
border-right: 2px solid;
font-size: 2em;
font-weight: bold;
}
}
@keyframes typing {
from {
width: 0px;
}
}
@keyframes blink {
100% {
border-color: transparent
}<body>
<section id="mainVisual">
<div class="slide-txt"></div>
<div class="slide-1">
<img src="img/mainslide01_bar2.png"></div>
<div class="slide-2">
<img src="img/mainslide01_bar1.png"></div>
<div class="typing-txt">
TEXT
</div>
</section>
</body>