saGii saGii - 6 months ago 22
CSS Question

CSS Animation, ellipses starting from the end and repeating

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 Source

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