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.

Rowboat

Mistakes were saved. Here's the updated version. – Rowboat

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: forwards;
  width: 1.25em;
}

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

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

Pathos

I would add a delay to the animation to be a complete answer: ellipsis-dot 2s infinite .3s; – Dichroic

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

I was waiting way longer for the animation to finish loading than I care to admit... – Talkie

This is so much better than trying to animate with JS and dealing with the eternally frustrating struggle of clearing an Interval. – Stenography

Answer 2

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

Marvel

Is there any reason to put content:''; twice? – Vitellin

Nope, mistake. Edited. – Marvel

This is not the solution to my problem, since its doing the alternate direction thing. Not the kind of loading i want. – Rowboat

@Rowboat This will animate like the accepted answer if you change the keyframe 50% to 0% – Chichi

Answer 3

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.

Rangoon

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