Expected "to" or "from" text-shadow

Question

I want create this:

loading...(with dots that move)

and I have this code in SASS:

.loading:after 
  content: ' .'
  animation: dots 1s steps(5, end) infinite

@keyframes dots 
  0%, 20% 
    color: rgba(0,0,0,0)
    text-shadow .25em 0 0 rgba(0,0,0,0), //here this the problem
    .5em 0 0 rgba(0,0,0,0)

....

When compile I have this error:

 Expected "to" or "from" text-shadow

Anyone knows how can I resolve this?

Can you please refer below link: https://stackoverflow.com/questions/13014808/is-there-anyway-to-animate-an-ellipsis-with-css-animations ? Might be this will help you. — Hardi Shah, Apr 30 '20 at 11:04
you missed a `colon` after `text-shadow`. Also, the comma seperated rule should be in the same line — slumbergeist, Apr 30 '20 at 11:18

score 0 · Answer 1 · answered May 01 '20 at 16:34

Do you mean something like this?

HTML:

<p>
Loading
<span class="dot-one">.</span>
<span class="dot-two">.</span>
<span class="dot-three">.</span>
</p>

SCSS:

.dot-one {
  animation: one 1s steps(5, end) infinite;
}
.dot-two {
  animation: two 1s steps(5, end) infinite;
}
.dot-three {
  animation: three 1s steps(5, end) infinite;
}

 @keyframes one {
  0% {
    color: white;
  }
  70% {
    color: grey;
  }
  100% {
    color: black;
  }
}

@keyframes two {
  0% {
    color: white;
  }
  40% {
    color: grey;
  }
  100% {
    color: black;
  }
}

@keyframes three {
  0% {
    color: white;
  }
  20% {
    color: grey;
  }
  100% {
    color: black;
  }
}

I cleaned up some syntax issues with keyframes and singled out the usage of the dots. I'm not sure if this is quite the form of "loading dots" you had in mind.

Expected "to" or "from" text-shadow

1 Answers1