用 CSS 动画计数：仅动画一次而不是连续动画

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) 时再次从零开始计数。

如何设置计数器只计数一次并保持其最终值（不再计数）？

Answer 1

将infinite改为forwards....

forwards

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe depends on the value of animation-direction and 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;
  }
}

<div></div>

用 CSS 动画计数：仅动画一次而不是连续动画

Count with CSS Animation: Animate only once instead of continuously

html

css

animation

css-animations