[英]custom css animation breaking for mobile browsers
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 . 我想使用下面提到的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;}
This is the jsfiddle for the code https://jsfiddle.net/ed8nuf76/ 这是代码https://jsfiddle.net/ed8nuf76/的jsfiddle
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. 如果仔细看,则完整的句子不会在移动浏览器中呈现,甚至在Fiddle中也不会呈现,在文本的宽度达到100%之后,它会截断文本,而不是将其溢出到第二行。
Any way to solve this problem? 有什么办法解决这个问题?
The problem is not about the mobile browsers itself, it's just connected to it, because of a simple thing: width
's space. 问题不在于移动浏览器本身,而是与之相连的,原因很简单:
width
的空间。
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. 在您的示例中,文本容器的宽度将由所使用文本的长度决定,这意味着即使将
width
设置为100%
,您仍然受到浏览器设备总宽度的限制。 Plus, CSS3 only has no idea how to manage the logic to break the line. 另外,CSS3只不知道如何管理逻辑来打破界限。
Best solution: go to JavaScript and let it handle this logic stuff. 最佳解决方案:使用JavaScript,并让其处理这些逻辑问题。
We have a buch of good options that manage this in an easy and efficient way: 我们有很多不错的选择,可以轻松有效地管理此问题:
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). 如果您想要一个不涉及JavaScript的解决方案,则可以使用下面的纯CSS方法-但要使其正常工作,您需要知道您的内容占用了多少行(因为仅CSS不会能够通过计算得出此结果)。
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. 如以下示例所示,如果您知道自己的内容占用3行,并且每行的
line-height
均为24px
,则可以告诉动画包含div
的开头应为24px
高, 48px
高在1秒钟之后, 72px
高大另一第二后和最后96px
高。
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. 然后,您可以使用不透明的
::after
伪元素隐藏div中文本的最低可见行,并为伪元素提供1秒的animation
,该animation
重复3次,其中每次伪元素的宽度从300px
到0
,显示下面的文本。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.