Ожидаемое «до» или «от» text-shadow

Question

Я хочу создать это:

loading...(with dots that move)

, и у меня есть этот код в 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)

.... 

При компиляции у меня появляется эта ошибка:

 Expected "to" or "from" text-shadow

Кто-нибудь знает, как я могу решить эту проблему?

Answer 1

Вы имеете в виду что-то как этот ?

HTML:

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

S CSS:

.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 Устранены некоторые синтаксические проблемы с ключевыми кадрами и выделено использование точек. Я не уверен, что это именно та форма «загрузки точек», которую вы имели в виду.