Instead of overwhelming you with code, I'll just share a link to the types of animations I've come across so far.
Although these options are close to what I'm looking for, none of them are exactly right. The one that comes closest to my vision is the bouncing text effect... However, all of these are designed based on containers larger than the text.
Is there a way to make my text scroll horizontally only when it overflows? (https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
I initially believed this could be achieved using CSS alone. But if not, JavaScript would also work.
div[type=text] {
border: solid 1px black;
height: 20px;
width: 100px;
font-family: sans-serif;
overflow: hidden;}
<div type="text">abcdefghijklmnopqrstuvwxyz</div>