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

Question

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

9

我有一个非常简单的动画设置，用于显示三个点的加载。我从各处获取了一大堆这样的动画，挑选了看起来最简单的一个。但问题是它从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;  }
}

这是一个代码片。

我有一个表格，其中包含数百个完全空白的条目。我希望它们从三个点开始显示，然后变成0，并执行现在正在执行的操作。

注：持续时间为9000实际上是900。这是为了强调在运行代码片后动画开始的部分而放慢的速度。

- saGii

错误已经被保存。这是更新版本。 - saGii

3个回答

5

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

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

- Nick De Jaeger

有没有必要两次写入content:'';？ - Abhishek Pandey

1

不对，错误了。已经修改。 - Nick De Jaeger

1

这不是我的问题的解决方案，因为它正在执行另一种方向的操作。不是我想要的那种加载方式。 - saGii

如果您将关键帧50％更改为0％，则@saGii的动画效果将与已接受的答案相同。 - Paul

1

我看到你的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: "\2026";
  width: 0em;
}

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

- mluke

1

感谢您指出这些错误。我一直在试图解决最初的问题，没有意识到它自动将其保存为基础文件。已更正。但是，您的答案不适用于我。当应用于大型HTML表格时，反转动画看起来相当奇怪，所以我不会采用。谢谢您的回复。 - saGii

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ismail Farooq · Accepted Answer

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