CSS Animation, ellipses starting from the end and repeating

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.

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

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