CSS 动画，省略号从末尾开始重复

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: "26"; /* ascii code for the ellipsis character */
  width: 0em;
}

@keyframes ellipsis {
  to {    width: 1.25em;  }
}

这里是 fiddle。

我将这些显示在 table 中，其中有 100 个一起显示。这一切都是从完全空的开始。我需要他们从 3 个点开始。然后转到 0 然后做它现在正在做的事情。

注意：持续时间 9000 实际上是 900。它在我运行 fiddle.

之后放慢以强调动画的开始

Answer 1

.loading {
  font-size: 30px;
}

.loading:after {
  content: "26";
  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;
  }
}

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

Answer 2

.loading {
  font-size: 30px;
}

.loading:after {
  content: "...";
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis-dot 1s infinite .3s;
  animation-fill-mode: forwards;
  width: 1.25em;
}

@keyframes ellipsis-dot {
  25% {
    content: "";
  }
  50% {
    content: ".";
  }
  75% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

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

Answer 3

我在您的 CSS 中发现了一些常见问题，我将在此处指出它们更具体：

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

参考：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: "26";
  width: 0em;
}

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

CSS 动画，省略号从末尾开始重复

CSS Animation, ellipses starting from the end and repeating

html

css

animation

ellipsis