If you're looking for a solution that doesn't require javascript, you can utilize the following pure-CSS approach - but keep in mind that you'll need to have an understanding of how many lines your content spans (as CSS alone cannot calculate this).
In the example provided below, by knowing that your content occupies 3 lines and each line has a line-height of 24px, you can specify to the animation that the container div should start at a height of 24px, grow to 48px after 1 second, expand further to 72px after another second, and finally reach a height of 96px.
You can then hide the lowest visible line of text within the div using an opaque ::after pseudo-element and apply a 1-second animation to it which repeats three times, with each repetition causing the pseudo-element's width to shrink from 300px to 0, gradually revealing the underlying text.
Here is a functional demonstration:
p {
margin-left: 6px;
font-size: 16px;
line-height: 24px;
white-space: nowrap;
overflow-x: hidden;
overflow-y: hidden;
animation: type 3s;
}
div {
position: relative;
width: 300px;
height: 96px;
padding: 0 6px;
overflow: hidden;
animation: growTaller 3s step-end;
}
div p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 24px;
white-space: normal;
overflow-x: hidden;
overflow-y: visible;
animation: none;
}
div::after {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
z-index: 6;
width: 312px;
height: 24px;
background-color: rgb(255,255,255);
animation: typeFaster 1s linear 3;
}
@keyframes type {
from {width: 0;}
to {width: 100%;}
}
@keyframes typeFaster {
from {width: 312px;}
to {width: 0;}
}
@keyframes growTaller {
0% {height: 24px;}
33.33% {height: 48px;}
66.66% {height: 72px;}
100% {height: 96px;}
}
<p>Hi folks, this is typing animation using CSS, I want this to run in mobile browsers without breaking.</p>
<div>
<p>Hi folks, this is typing animation using CSS, I want this to run in mobile browsers without breaking. Using this method, it works!</p>
</div>