CSS Animation, ellipses starting from the end and repeating - html

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.

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>

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>

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.