使动画关键帧无限重复

Question

我正在倒计时计时器圈。动画在第一次迭代时效果很好，但是圆形动画在第一次迭代后始终保持满状态，并且不会休息。该数字继续正常工作，并回落到20，再次递减计数。我需要红色的倒数计时行来复制此内容。

第一次：

第二次：

我尝试添加

之类的内容

 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

css（scss）-

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

有关如何使此动画无限发生的任何建议都将有所帮助。

Answer 1

您必须从动画中删除前进，因为前进表示动画在首次运行后保持原样。

animation: circletimer 59s linear infinite;

W3Schools对aniamtion-fill-mode：forwards的描述是：“元素将保留由最后一个关键帧设置的样式值（取决于动画方向和动画迭代次数）”