我正在制作一个倒数计时器圆圈。动画在第一次迭代时工作正常，但圆圈动画在第一次迭代后总是保持满的状态，并且不休息。数字继续正常工作，并休息到20，再次倒数。我需要红色的倒数计时线来复制这个。
第一次：
x1c 0d1x的数据
第二次：

的
我试过添加一些东西

animation: circletimer 59s linear infinite forwards;

字符串
和

animation-iteration-count: infinite

型
但我似乎不能让动画发生超过一次。
我当前拥有的代码是：
倒计时组件-

interface IProps {
  countdown: number
}

const CountDownCircle: FunctionComponent<IProps> = ({
  countdown,
}) => {
  console.log(countdown)
  return (
    <div className={'countdown__circle'}>
      <svg className={'countdown__circle-svg'} width="200px" height="200px">
        <circle className={'circle'} cx="100" cy="100" r="28" />
      </svg>
      <span className={'timer'}>{countdown}</span>
    </div>
  )
}
export default CountDownCircle

型
十二烷基硫酸钠

.countdown__circle {
  position: absolute;
  bottom: 34px;
  right: 47px;
}

@keyframes circletimer {
  0% {
    stroke-dashoffset: 500;
    stroke-dasharray: 500;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 500;
  }
}
.countdown__circle-svg {
  background-color: transparent;
  position: absolute;
  background-color: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(-90deg);
  .circle {
    stroke: $red;
    stroke-width: 5;
    stroke-linecap: round;
    fill: transparent;
    stroke-dashoffset: 500;
    stroke-dasharray: 0;
    animation: circletimer 59s linear infinite forwards;
  }
}
.timer {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  color: $black;
  font-size: 25px;
  font-weight: 100;
  font-family: $proximaBold;
}

型
如何让这个动画无限地发生？