On my website, I’ve got a credit counter which updates every 10 seconds and increments by 10. I am looking for a possibility to play an animation on the very counter once the number changes.

The counter looks like the following:
<span id="gemCounter">0</span>

Let’s say, I’ve got an animation with the name pop.
If I now apply this to the element with the CSS

#gemCounter {
  animation-name: pop;
  animation-duration: 1s;
}

it obviously just plays the animation once.

Is there a CSS-only solution for the animation to play every time the content from the #gemCounter changes?

I looked up some examples, but all were done with JS.