Не зацикливается анимация. Где допущена ошибка?

Question

[Taron4uk]

<div class="redirect-text">Подождите
            <a href="#" class="link1">.</a>
            <a href="#" class="link2">.</a>
            <a href="#" class="link3">.</a>
        </div>

.link1, .link2, .link3 {
  opacity: 0;
  animation-duration: 1s;
  animation-name: appearance;
    animation-iteration-count: infinite;
  animation-fill-mode: forwards;
    animation-timing-function: linear;
}
.link1, .link2, .link3 
{
  animation-delay: 0.2s;
}
.link2
{
  animation-delay: 0.4s;   
}
.link3
{
  animation-delay: 0.6s;   
}
@keyframes appearance
{
  from
  {
    opacity: 1;
  }
  to
  {
    opacity: 1;
  }

Все настроено и анимируется с начала страницы, но останавливается и все, только при перезагрузке страницы заново идет анимация. Цикличность infinite почему-то не работает.
Точки должны появляться поочередно

Answer 1

[Дима Паутов]

from
  {
    opacity: 1; // Замени на 0
  }

Comments

[Taron4uk]

Дмитрий, спасибо огромное!