Question

假设我们有这个简单的 CSS 动画计数器：

div::after {
  font: 800 40px system-ui;
  content: counter(count);
  animation: counter 5s linear infinite;
  counter-reset: count 0;
}
@keyframes counter {
  0% {
    counter-increment: count 0;
  }
  10% {
    counter-increment: count 8;
  }
  20% {
    counter-increment: count 16;
  }
  30% {
    counter-increment: count 32;
  }
  40% {
    counter-increment: count 64;
  }
  50% {
    counter-increment: count 128;
  }
  60% {
    counter-increment: count 256;
  }
  70% {
    counter-increment: count 512;
  }
  80% {
    counter-increment: count 1024;
  }
  90% {
    counter-increment: count 2048;
  }
  100% {
    counter-increment: count 4000;
  }
}

<div></div>

如您所见，计数器在达到其最终值（4000）时再次从零开始计数。

我如何将计数器设置为仅计数一次并保持其最终值（无需再次计数）？

2

Answer 1

Changeinfinitetoforwards.... forwards

目标将保留执行期间遇到的最后一个关键帧设置的计算值。最后一个关键帧取决于 animation-direction 和 animation-iteration-count 的值：

div::after {
  font: 800 40px system-ui;
  content: counter(count);
  animation: counter 5s linear forwards;
  counter-reset: count 0;
}
@keyframes counter {
  0% {
    counter-increment: count 0;
  }
  10% {
    counter-increment: count 8;
  }
  20% {
    counter-increment: count 16;
  }
  30% {
    counter-increment: count 32;
  }
  40% {
    counter-increment: count 64;
  }
  50% {
    counter-increment: count 128;
  }
  60% {
    counter-increment: count 256;
  }
  70% {
    counter-increment: count 512;
  }
  80% {
    counter-increment: count 1024;
  }
  90% {
    counter-increment: count 2048;
  }
  100% {
    counter-increment: count 4000;
  }
}