I want to create a unique effect where text loads on the page, revealing one letter at a time from left to right in a fading manner. However, I also desire for each letter to slightly increase and decrease in size once while loading, creating a wave-like motion as the letters appear.
I have attempted the code below, but it gives too much of a typewriter feel and cuts off part of a letter. Does anyone have a solution for this?
Thank you in advance,
.line-1{
width: 100%;
margin: 0 auto;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
.anim-typewriter{
text-align: center;
animation: typewriter 2s 0.5s 1 normal both;
}
@keyframes typewriter{
from{width: 0;}
to{width: 100%;}
}