Count with CSS Animation: Animate only once instead of continuously

Question

Assumed we have this simple piece of CSS animated counter:

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>

As you can see, the counter begins counting again from zero when reaching its final value (4000).

How can I set the counter to count only once and remain at its final value (without counting again)?

If i may, why you using counter instead of simply modifying the content property ? — user7148391
– user7148391, Commented May 30, 2021 at 20:42

Paulie_D · Accepted Answer · 2021-05-30 20:41:31Z

Change infinite to 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>

Collectives™ on Stack Overflow

Count with CSS Animation: Animate only once instead of continuously

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related