使动画关键帧无限重复

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 的描述是：“元素将保留最后一个关键帧设置的样式值（取决于动画方向和动画迭代计数）”

Answer 2

我注意到在你的 CSS 中，“.countdown__circle-svg”没有结束 }，而 .circle 有 2 } }。我认为它将它视为一个大元素/类，无论如何......我之前在无限动画上使用过前进并且它们循环，所以我不知道为什么你不会，我认为这是括号 - 但我刚从船 - 抱歉，如果我错了。