使动画关键帧无限重复答案

【问题标题】：Make animation keyframes repeat infinitely使动画关键帧无限重复
【发布时间】：2019-08-13 13:04:35
【问题描述】：

我正在制作一个倒计时圈。动画在第一次迭代时运行良好，但圆形动画在第一次迭代后始终保持完整并且不会停止。该数字继续正常工作并返回到 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;
}

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

【问题讨论】：

标签： javascript css reactjs css-animations countdown

【解决方案1】：

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

animation: circletimer 59s linear infinite;

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

【讨论】：