How to remove an infinite animation from a hidden element

Question

The scenario is like this:

two adjacent element

A & B, overlapping elements(A has absolute positioning) both toggle between CSS transform scale(0) to scale(1) ie when A is shown B is hidden

I have applied an infinite animation on A (SVG opacity changing grom 0.7-1).

When A is hidden, it's animation still seems to be working.

How to fix this without using display: none

Answer 1

You can remove a class with animation for A, and then, if the animation needs to be resumed, return the class with the animation again.

Answer 2

I think the best approach to do this would be setting animation: none or animation: unset when A is hidden. You can set up a watcher, like this one , to watch for A's property changes and then use an if conditional to check if it has reached its "hidden state." Then you can document.getElementById('its id').style.animation = unset

A bonus tip would be using else to set the animation property back to normal once it is "unhidden."