有没有办法用 CSS 动画制作省略号动画？

我试图有一个省略号动画，并想知道它是否可能与 CSS 动画..。

所以可能就像

Loading...
Loading..
Loading.
Loading...
Loading..

基本上就这样继续下去，有什么想法吗？

编辑: 像这样: http://playground.magicrising.de/demo/ellipsis.html

61921 次浏览
小开

简短的回答是“不是真的”。但是，你可以玩动画宽度和溢出隐藏，也许得到一个效果，是“足够接近”。(下面的代码仅适用于 Firefox，根据需要添加供应商前缀)。

Html

<div class="loading">Loading</div>

CSS

.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-moz-animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@-moz-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}

演示: http://jsfiddle.net/MDzsR/1/

edit

看起来 chrome 在动画化伪元素方面有问题。一个简单的修复方法是将省略号包装在它自己的元素中。看看 http://jsfiddle.net/MDzsR/4/

小开

您可以尝试使用 animation-delay property和时间每个省略号字符。在这种情况下，我已经把每个省略号字符在一个 <span class>，所以我可以动画他们分开。

我做了一个 网站: http://jsfiddle.net/DkcD4/94/”rel = “ noReferrer”> demo ，虽然不是很完美，但至少表明了我的意思:)

我的例子中的代码:

超文本标示语言

Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>​

CSS

.one {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
}


.two {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
}


.three {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
}


@-webkit-keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}


@keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
小开

实际上，有一种纯 CSS 的方法可以做到这一点。

我从 cssTricks 那里得到了这个例子，但是它也在 Internet Explorer 中得到了支持(我在10 + 中测试过)。

Check the Demo: http://jsfiddle.net/Roobyx/AT6v6/2/

HTML:

<h4 id="searching-ellipsis"> Searching
<span>.</span>
<span>.</span>
<span>.</span>
</h4>

CSS:

@-webkit-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}


@-moz-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}


100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}


@-webkit-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}


@-moz-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}


@-o-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}


@keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
#searching-ellipsis span {
-webkit-animation-name: opacity;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: opacity;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-ms-animation-name: opacity;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
}
#searching-ellipsis span:nth-child(2) {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
-ms-animation-delay: 100ms;
-o-animation-delay: 100ms;
animation-delay: 100ms;
}
#searching-ellipsis span:nth-child(3) {
-webkit-animation-delay: 300ms;
-moz-animation-delay: 300ms;
-ms-animation-delay: 300ms;
-o-animation-delay: 300ms;
animation-delay: 300ms;
}
小开
最佳答案

How about a slightly modified version of @ xec 的回答: http://codepen.io/thetallweeks/pen/yybGra

使用 steps.参见 MDN 文档的 CSS 动画

.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(4, end) 900ms infinite;
animation: ellipsis steps(4, end) 900ms infinite;
content: "\2026";
/* ascii code for the ellipsis character */
width: 0px;
}


@keyframes ellipsis {
to {
width: 40px;
}
}


@-webkit-keyframes ellipsis {
to {
width: 40px;
}
}
<h1 class="loading">Loading</h1>

@xec's answer has more of a slide-in effect on the dots, while this allows the dots to appear instantly.

小开

即使是一个更简单的解决方案，工程相当不错！

<style>
.loading::after {
display: inline-block;
animation: dotty steps(1,end) 1s infinite;
content: '';
}
    

@keyframes dotty {
0%   { content: ''; }
25%  { content: '.'; }
50%  { content: '..'; }
75%  { content: '...'; }
100% { content: ''; }
}
</style>
<div class="loading">Loading</div>

只是用动画编辑内容，而不是隐藏一些点..。

演示: https://jsfiddle.net/f6vhway2/1/

编辑: 感谢 @ BradCollins指出 content是 not an animatable property。

目前，(2021)这个工作在 Chrome/WebKit/Blink/Electron 和 Firefox 以及新版本的 Edge 中。

小开

后期添加，但我找到了一种方法来做到这一点，支持居中文本。

<element>:after {
content: '\00a0\00a0\00a0';
animation: progress-ellipsis 5s infinite;
}


@keyframes progress-ellipsis {
0% {
content: '\00a0\00a0\00a0';
}
30% {
content: '.\00a0\00a0';
}
60% {
content: '..\00a0';
}
90% {
content: '...';
}
}
小开

下面是我的解决方案，使用纯 css https://jsfiddle.net/pduc6jx5/1/ 解释: < a href = “ https://medium.com/@lastSeeds/create-text-省略号-动画-with-Pure-css-7f61acee69cc”rel = “ nofollow norefrer”> https://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc

信息交换系统




.dot1 {
animation: visibility 3s linear infinite;
}


@keyframes visibility {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}


.dot2 {
animation: visibility2 3s linear infinite;
}


@keyframes visibility2 {
0% {
opacity: 0;
}
21% {
opacity: 0;
}
22% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}


.dot3 {
animation: visibility3 3s linear infinite;
}


@keyframes visibility3 {
0% {
opacity: 0;
}
43% {
opacity: 0;
}
44% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}

Html

Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>
小开

你可以动画 clip(或更好的 clip-path，如果你不需要 IE 支持)

div {
display: inline-block;
font-size: 1.4rem;
}


div:after {
position: absolute;
margin-left: .1rem;
content: ' ...';
animation: loading steps(4) 2s infinite;
clip: rect(auto, 0px, auto, auto);
}


@keyframes loading {
to {
clip: rect(auto, 20px, auto, auto);
}
}
<div>Loading</div>

小开

我做的正是 @ CodeBrauer 干净利落地完成了上述工作，但是因为我的文本是 text-align: center(这也适用于 right) ，而且我不希望每次添加句点时文本都移动，所以我添加了“标点符号空间”:

<style>
.loading::after {
display: inline-block;
animation: dotty steps(1,end) 1s infinite;
content: '';
}
    

@keyframes dotty {
0%   { content: '\2008\2008\2008'; }
25%  { content: '.\2008\2008'; }
50%  { content: '..\2008'; }
75%  { content: '...'; }
100% { content: '\2008\2008\2008'; }
}
</style>
<div class="loading">Loading</div>

提交答案