用于移动浏览器的自定义 CSS 动画中断

Question

我想使用下面提到的 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;} 

这是代码https://jsfiddle.net/ed8nuf76/的jsfiddle

如果你仔细看，完整的句子在移动浏览器中甚至在 Fiddle 中都没有呈现，当文本宽度达到 100% 后，它会截断文本而不是溢出到第二行。

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

Answer 1

问题不在于移动浏览器本身，而只是连接到它，原因很简单：width 的空间。

在您的示例中，文本容器的宽度将由所使用的文本的长度决定，这意味着即使您将width 设置为100%，您仍然会受到浏览器设备的限制总宽度。另外，CSS3 只是不知道如何管理打破线的逻辑。

---

最佳解决方案：使用 JavaScript 并让它处理这些逻辑问题。

我们有很多不错的选择，可以轻松有效地管理此问题：

• Typed.js（我最喜欢的）；
• typewriter.js;
• realistic-typewriter.js

Answer 2

如果您想要一个不涉及 javascript 的解决方案，您可以使用下面的纯 CSS 方法 - 但要使其工作，您需要知道您的内容占用了多少行（因为仅 CSS 就赢了'无法通过计算得出）。

正如您在下面的示例中看到的，如果您知道您的内容占用 3 行，并且您还知道每行有一个 line-height 或 24px，您可以告诉动画包含 div 应该一开始是24px高，1秒后48px高，再过一秒72px高，最后是96px高。

然后，您可以使用不透明的 ::after 伪元素隐藏 div 中可见的最低文本行，并给伪元素 1 秒 animation 重复 3 次，其中，每次，伪-元素的宽度从300px缩小到0，露出下面的文字。

工作示例：

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>