javascript - 使动画关键帧无限重复

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

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

animation: circletimer 59s linear infinite;

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