我正在尝试制作省略号动画，并想知道是否可以使用 CSS 动画...
所以它可能就像
Loading...
Loading..
Loading.
Loading...
Loading..
基本上就这样继续下去。有任何想法吗？
编辑：像这样： http: //playground.magicrising.de/demo/ellipsis.html
问问题
54595 次
8 回答
108
@xec 答案的略微修改版本怎么样：http: //codepen.io/thetallweeks/pen/yybGra
HTML
添加到元素的单个类：
<div class="loading">Loading</div>
CSS
使用steps. 查看 MDN 文档
.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: 20px;
}
}
@-webkit-keyframes ellipsis {
to {
width: 20px;
}
}
@xec 的答案对点有更多的滑入效果，而这允许点立即出现。
于 2015-01-21T18:49:55.077 回答
61
您可以尝试使用animation-delay property和时间每个省略号字符。在这种情况下，我将每个省略号字符放在 a 中<span class>，这样我就可以分别为它们设置动画。
我做了一个演示，它并不完美，但它至少说明了我的意思:)
我的示例中的代码：
HTML
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;
}
}
于 2012-10-22T18:12:09.977 回答
44
即使是更简单的解决方案，效果也很好！
<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不是动画属性。
目前，(2021) 这适用于 Chrome/WebKit/Blink/Electron 和 Firefox 以及新版本的 Edge。
于 2016-12-06T09:08:03.270 回答
18
简短的回答是“不是真的”。但是，您可以使用动画宽度和隐藏溢出，并且可能会获得“足够接近”的效果。（以下代码仅适用于 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/
编辑
似乎 chrome 在为伪元素设置动画时存在问题。一个简单的解决方法是将省略号包装在它自己的元素中。查看http://jsfiddle.net/MDzsR/4/
于 2012-10-22T15:49:00.083 回答
7
后期添加，但我找到了一种支持居中文本的方法。
<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: '...';
}
}
于 2019-01-24T15:03:46.737 回答
3
您可以制作动画clip（clip-path如果您不需要 IE 支持则更好）
div {
position: relative;
display: inline-block;
font-size: 1.4rem;
}
div:after {
position: absolute;
margin-left: .1rem;
content: ' ...';
display: inline-block;
animation: loading steps(4) 2s infinite;
clip: rect(auto, 0px, auto, auto);
}
@keyframes loading {
to {
clip: rect(auto, 20px, auto, auto);
}
}<div>Loading</div>于 2019-06-25T18:35:26.450 回答
2
好吧，实际上有一种纯粹的 CSS 方法可以做到这一点。
我从 CSS Tricks 中获得了示例，但它也在 Internet Explorer 中得到支持（我已经在 10+ 中对其进行了测试）。
查看演示：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;
}
于 2014-01-22T14:21:25.877 回答
0
这是我的纯 css 解决方案https://jsfiddle.net/pduc6jx5/1/ 解释：https ://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc
scss
.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>
于 2019-06-25T14:49:58.193 回答