custom css animation breaking for mobile browsers

Question

I want to use css animation mentioned below, but it breaking in mobile browsers because I have made overflow as hidden and white-space as no-wrap as part of animation .

p{
  color: black; 
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 5s steps(60, end);
  opacity: 0;
}

@keyframes type{
  from { width: 0; opacity:1;} 
  to { opacity:1;} 

This is the jsfiddle for the code https://jsfiddle.net/ed8nuf76/

If you look carefully, the complete sentence is not rendered in mobile browsers and even in Fiddle, after the width of the text reaches 100% it truncates the text instead of overflowing it to second line.

Any way to solve this problem?

Answer 1

The problem is not about the mobile browsers itself, it's just connected to it, because of a simple thing: width 's space.

In your example, the width of the text container will be determined by the length of the text being used, which means that even if you set the width to 100% , you're still restricted by the browser device total width. Plus, CSS3 only has no idea how to manage the logic to break the line.

---

Best solution: go to JavaScript and let it handle this logic stuff.

We have a buch of good options that manage this in an easy and efficient way:

• Typed.js (my favorite one);
• typewriter.js ;
• realistic-typewriter.js

Answer 2

If you want a solution to this which doesn't involve javascript, you can use the pure-CSS method below - but for it to work you'll need to know how many lines your content takes up (because CSS alone won't be able to derive this computationally).

As you can see in the example below, if you know that your content takes up 3 lines and you also know that each line has a line-height of 24px you can tell the animation that the containing div should be 24px tall at the start, 48px tall 1 second later, 72px tall another second later and finally 96px tall.

You can then conceal the lowest visible line of text in the div with an opaque ::after pseudo-element and give the pseudo-element a 1 second animation which repeats three times, in which, each time, the pseudo-element's width shrinks from 300px to 0 , revealing the text beneath.

Working Example:

 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>