The animation doesn't loop. Where is the error?

Question

css

<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;
  }

Everything is set up and animated from the beginning of the page, but everything stops, only when the page is reloaded, the animation starts again. For some reason, infinite cycling doesn't work.
The dots should appear in order

Answer 1

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