CSS Animation, ellipses starting from the end and repeating

Question

I have a very simple animation setup, to show a loading three dots. I got a bunch of them from around and picked the simplest looking one. The problem I have with it, is that it starts from 0 like it's told to. I need it to start from the end.

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

Here's a fiddle.

I have these showing in a table with 100s of them showing together. Which all start from completely empty. I need them to start from 3 dots. Then go to 0 then do what it's doing right now.

Note: the duration 9000 is actually 900. It's slowed down to emphasize the start of the animation after I run the fiddle.

Mistakes were saved. Here's the [updated version](https://jsfiddle.net/hassan_rehman/03skft9w/8/). — saGii, Apr 27 '17 at 16:13

score 18 · Accepted Answer · edited May 22 '22 at 01:29

18

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

edited May 22 '22 at 01:29

danronmoon

3,814
5
34
56

answered Apr 27 '17 at 13:31

Ismail Farooq

6,309
1
27
47

1

I would add a delay to the animation to be a complete answer: `ellipsis-dot 2s infinite .3s;` – m.spyratos Apr 27 '17 at 13:59
I was using 40 steps to kind of give it a fluid look, but i guess that's not possible with the 4step approach now is it. The underline problem is solved, so it is the correct answer. – saGii Apr 27 '17 at 16:19
1

I was waiting way longer for the animation to finish loading than I care to admit... – Per Alexandersson Apr 27 '17 at 17:57

Nick De Jaeger · Answer 2 · 2017-04-27T13:21:28.407

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>

edited Apr 27 '17 at 13:21

answered Apr 27 '17 at 13:15

Nick De Jaeger

1,247
10
13

Is there any reason to put `content:'';` twice? – Abhishek Pandey Apr 27 '17 at 13:20
1

Nope, mistake. Edited. – Nick De Jaeger Apr 27 '17 at 13:22
1

This is not the solution to my problem, since its doing the alternate direction thing. Not the kind of loading i want. – saGii Apr 27 '17 at 16:16
@saGii This will animate like the accepted answer if you change the keyframe 50% to 0% – Paul Apr 27 '17 at 20:27

score 1 · Answer 3 · answered Apr 27 '17 at 14:04

I'm seeing some common problems in your CSS, and I'll point them here to be more specific:

Your animation-fill-mode rule provides a invalid value. You need to correct it to forwards instead of "fowards".
The animation name differs from the animation name stated on your @keyframes rule. You'll need to correct that as well by changing one of those.
Suggestion: In order to maintain complete track of your animation, I suggest you to define the beginning point as well. Specifying both from and to in your @keyframes rule will save you some time, should you need to change it later.

Reference: Animation - CSS at MDN

That aside, you can apply animation-direction: reverse to your element's CSS. It will reverse the defined animation, and make it run backwards.

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

I've updated your JSFiddle using alternate-reverse, which feels cool.

Thanks for notifying those mistakes. I was playing around to solve the initial problem. Didn't realise it was auto saving it as base. [Corrected](https://jsfiddle.net/hassan_rehman/03skft9w/8/). However, your answer is not the solution for me. The reverse animation thing looks rather odd when applied on a large html table, so i'm going to pass. Thank you for your response. — saGii, Apr 27 '17 at 16:08

CSS Animation, ellipses starting from the end and repeating

3 Answers3