Hello
I've added a typewriter effect on my homepage. The animation seems to be working well but the transition between sentences is a bit slow. Is there a way to reduce the amount of time a sentence remains on the screen before getting deleted & the next one getting typed?
For example, at the moment, after 'More Sales.' is typed out, the sentence remains on screen for about 5 seconds before it gets deleted and the next sentence is typed out. How do I reduce this to 1.5 or 2 seconds?
This is the code I've used:
//Home page text animation//
@keyframes text1 {0%,25%,50%,75%,100% {
width: 0;} 1%,24% {width: 5.5em;}
}
@keyframes text2 {0%,25%,50%,75%,100% {width: 0;} 26%, 49% {width: 8em;}
}
@keyframes text3 {0%,25%,50%,75%,100% {width: 0;} 51%,74% {width: 5.5em;}
}
@keyframes text4 {0%,25%,50%,75%,100% {width: 0;} 76%,99% {width: 6em;}
}
.text_1 {animation: text1;}
.text_2 {animation: text2;}
.text_3 {animation: text3;}
.text_4 {animation: text4;}
.text_1, .text_2, .text_3, .text_4 {
overflow: hidden;
white-space: nowrap;
display: inline-block;
position: relative;
animation-duration: 20s;
animation-timing-function: steps(10, end);
animation-iteration-count: infinite;
}
.text_1::after, .text_2::after, .text_3::after, .text_4::after {
content: "|";
position: absolute;
right: 0;
animation: caret infinite;
animation-duration: 1s;
animation-timing-function: steps(1, end);
}
Thank you!