Javascript 用于移动浏览器的自定义css动画

我想使用下面提到的css动画，但它在移动浏览器中被打破了，因为我将溢出作为隐藏，将空白作为动画的一部分

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;} 

这是代码的JSFIDLE

如果仔细观察，整个句子不会在移动浏览器中呈现，甚至在小提琴中也不会呈现，当文本宽度达到100%时，它会截断文本，而不是溢出到第二行

---

有什么办法解决这个问题吗？

问题不在于移动浏览器本身，它只是连接到它，因为一件简单的事情：

宽度

的空间

在您的示例中，文本容器的宽度将由所使用文本的长度决定，这意味着即使您将

宽度设置为
100%
，您仍然受到浏览器设备总宽度的限制。另外，CSS3不知道如何管理逻辑来打破界限


最佳解决方案：转到JavaScript，让它处理这些逻辑问题

我们有很多好的选择，可以轻松有效地管理这一点：


（我最喜欢的）
)

如果您想要一个不涉及javascript的解决方案，您可以使用下面的纯CSS方法-但要使其发挥作用，您需要知道您的内容占用了多少行（因为仅CSS无法从计算上导出此内容）

正如您在下面的示例中所看到的，如果您知道您的内容占用了3行，并且您还知道每行的
行高
为
24px
，那么您可以告诉动画，包含
div
的部分在开始时应该是
24px
高，在1秒后是
48px
高，
72px
toll再过一秒，最后
96px
toll

然后，您可以使用不透明的
：：在
伪元素之后隐藏div中最低可见的文本行，并给伪元素一个1秒的
动画
，该动画重复三次，每次，伪元素的宽度从
300px
缩小到
0
，显示下面的文本

工作示例：


p{
左边距：6px；
字体大小：16px；
线高：24px；
空白：nowrap；
溢出x：隐藏；
溢出y：隐藏；
动画：3s型；
}
div{
位置：相对位置；
宽度：300px；
高度：96px；
填充：0 6px；
溢出：隐藏；
动画：步骤结束；
}
p组{
保证金：0；
填充：0；
字体大小：16px；
线高：24px；
空白：正常；
溢出x：隐藏；
溢出y：可见；
动画：无；
}
div：：之后{
内容：''；
显示：块；
位置：绝对位置；
底部：0；
右：0；
z指数：6；
宽度：312px；
高度：24px；
背景色：rgb（255255）；
动画：打字速度更快1s线性3；
}
@关键帧类型{
从{宽度：0；}
到{宽度：100%；}
}
@关键帧打字速度更快{
从{宽度：312px；}
到{宽度：0；}
}
@关键帧变高{
0%{高度：24px；}
33.33%{高度：48px；}
66.66%{高度：72px；}
100%{高度：96px；}
}
大家好，这是用CSS输入动画，我想让它在移动浏览器中运行而不中断

大家好，这是用CSS输入动画，我希望它能在移动浏览器中运行而不会中断。使用这种方法，它是有效的

完美！！CSS的使用