我有一个非常简单的动画设置,以显示加载三个点.我从周围得到了一堆,并选择了最简单的一个.我遇到的问题是它从0开始就像它被告知的那样.我需要它从头开始.
CSS：
.loading {
font-size: 30px;
}
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
/* animation: ellipsis-dot steps(40,start) 9000ms infinite; */
animation: ellipsis-dot 1s infinite;
animation-fill-mode: fowards;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0em;
}
@keyframes ellipsis {
to { width: 1.25em; }
}
这是一个fiddle.
我将这些显示在一张桌子上,其中有100张一起显示.这一切都从完全空洞开始.我需要他们从3点开始.然后转到0然后立即执行它正在做的事情.
注意：持续时间9000实际上是900.在我操作小提琴后,它会减慢以强调动画的开始.
解决方法
.loading {
font-size: 30px;
}
.loading:after {
content: "...";
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis-dot 1s infinite .3s;
animation-fill-mode: fowards;
width: 1.25em;
}
@keyframes ellipsis-dot {
25% {
content: "";
}
50% {
content: ".";
}
75% {
content: "..";
}
100% {
content: "...";
}
}
<div class="loading">Loading</div>
