Question

我有一个非常简单的动画设置，以显示加载三个点。我从周围得到了一堆，并选择了最简单的一个。我遇到的问题是它从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.在我操作小提琴后，它会减慢以强调动画的开始。

Answer 1

.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>

Answer 2

＆＃13;

.loading {
  font-size: 30px;
}

.loading:after {
  content: "\2026";
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;   
  animation: ellipsis-dot 1s infinite;
  animation-fill-mode: fowards;
  width: 1.25em;
}

@keyframes ellipsis-dot {
  50% {    
    width: 0em;
  }
  100% {
    width: 1.25em;
  }
}

＆＃13;

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

＆＃13;

Answer 3

我在CSS中看到了一些常见问题，我会在这里指出它们更具体：

您的animation-fill-mode规则提供的值无效。您需要将其更正为forwards而不是“fowards”。
动画名称与@keyframes规则中指定的动画名称不同。您还需要通过更改其中一个来纠正它。
建议：为了保持动画的完整跟踪，我建议您也定义起点。如果您需要稍后更改，则在from规则中指定to和@keyframes将为您节省一些时间。

参考：Animation - CSS at MDN

除此之外，您可以将animation-direction: reverse应用于元素的CSS。它将反转定义的动画，并使其向后运行。

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;   
  animation: ellipsis 1s infinite; /* Your previous rule */
  animation: ellipsis 1s infinite reverse;  /* You can reverse it like this */
  animation-direction: reverse; /* Or like this */
  content: "\2026";
  width: 0em;
}

我已使用 alternate-reverse 更新了您的JSFiddle，感觉很酷。

CSS动画，从结尾开始并重复的省略号

3 个答案: