CSS animation, ellipses starting from the end and repeating

Question

I have a very simple animation setup to show the loading of three points. I got a bunch of them from all sides and chose the simplest of them. The problem I am facing is that it starts at 0, as it was said. 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 the fiddle .

I have these readings in a table, of which 100 of them are shown together. That it all starts from completely empty. I need them to start at 3 points. Then go to 0, then do what it is doing right now.

Note: the duration of 9000 is actually 900. It slows down to emphasize the start of the animation after the script is run.

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: fowards; 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 see some common problems in your CSS, and I will point them out more specifically here:

• The animation-fill-mode rule contains an invalid value. You must correct it before forwards instead of fouls.
• The name of the animation is different from the name of the animation specified in your @keyframes rule. You must also fix this by changing one of them.
• Suggestion:. To maintain complete control over your animation, I suggest that you also define a starting point. Specifying both from and to in your @keyframes rule will save you some time if you need to change it later.

Link: Animation - CSS in MDN

As an aside, you can apply animation-direction: reverse to the CSS element. It will change a specific animation and make it run backward.

 .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 updated JSFiddle using alternate-reverse , which feels cool.