Home Is there a possibility to play a CSS animation if the content of an element is changed?

Questions

Is there a possibility to play a CSS animation if the content of an element is changed?

June 19, 2024

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.

>Solution :

This is from: https://css-tricks.com/restart-css-animation/

element = document.getElementById("logo");

// reset the transition by...
element.addEventListener("click", function(e) {
  e.preventDefault;
  
  // -> removing the class
  element.classList.remove("run-animation");
  
  // -> triggering reflow /* The actual magic */
  // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered.
  // Oops! This won't work in strict mode. Thanks Felis Phasma!
  // element.offsetWidth = element.offsetWidth;
  // Do this instead:
  void element.offsetWidth;
  
  // -> and re-adding the class
  element.classList.add("run-animation");
}, false);

This is, for me, the cleaner & easiest way to do it with minimal JS. The website above provided some dirty tricks if you wanna check it out.
But to answer your question; No, there is no way to play an animation "on command" with css only

EDIT: i’m thinking you could just add animation delay or something to make it wait 10s between each animation and play the animation on repeat using infinite, but this would be independant from your counter.

You could also use a css counter to do some magic but it sounds very very dirty and complex for nothing