Does hiding a div stop animations (CSS or JS)?

Question

Considering any CSS based loader animation as a reference. Typically, when some callback function is executed on success, the div is hidden so as to indicate that the results have arrived. My question is, does hiding the div actually stop the animation? Or do those still continue to use up CPU cycles?

What about non-CSS animations?

Answer 1

TL;DR

My question is, does hiding the div actually stop the animation? Or do those still continue to use up CPU cycles?

Not sure how the animation state is defined internally, but it's not using CPU cycles once hidden.

What about non-CSS animations?

CPU cycles are not used for rendering, but they are used for the JavaScript calculations under the hood.

---

Detailed answers with relevant examples/tests below:

---

CSS

As you can see here, the browser (at least in which I tested it) seems not to waste any cycles on invisible elements. It could vary with browsers as well as the browser versions. I assume older browsers don't care about this, but all the modern ones will try to save as much CPU as possible.

Here's a snippet/proof, try doubling the dark divs until it starts choking, then toggle them and see how the light div behaves:

function dbl(){
  var c = document.querySelectorAll('div.reg').length;
  for(var i = 0; i < c; i++){
    var div = document.createElement('div');
    div.className = 'reg';
    document.body.appendChild(div);
  }
}

function toggle(){
  var divs = document.querySelectorAll('div.reg');
  for(var i = 0; i < divs.length; i++){
    divs[i].style.display = 
      divs[i].style.display == 'none' ? 
      'inline-block' : 'none';
  }
}

div {height: 50px; width: 50px; margin: 2px; display: inline-block; background: #eee; animation: rot 1s linear infinite}

div.reg {background: #ccc}

@keyframes rot {
  0% { transform: rotateZ(0deg) }
  100% { transform: rotateZ(360deg) }
}

<button onclick="dbl()">Double dark divs</button>
<button onclick="toggle()">Toggle dark divs</button><br>
<div></div>
<div class="reg"></div>

---

JS (non-CSS)

For the non-CSS stuff, the browser won't waste any cycles on rendering the animations, but the JavaScript animation calculations will most definitely take place.

var r = 1;
var fps = document.querySelector('span');
var lastFrame = new Date();

function dbl(){
  var c = document.querySelectorAll('div.reg').length;
  for(var i = 0; i < c; i++){
    var div = document.createElement('div');
    div.className = 'reg';
    document.body.appendChild(div);
  }
}

function toggle(){
  var divs = document.querySelectorAll('div.reg');
  for(var i = 0; i < divs.length; i++){
    divs[i].style.display = 
      divs[i].style.display == 'none' ? 
      'inline-block' : 'none';
  }
}

function rot(){
  var divs = document.querySelectorAll('div');
  for(var i = 0; i < divs.length; i++){
    divs[i].style.transform = 'rotateZ(' + r + 'deg)';
  }
  r = (r+1)%360;
  fps.textContent = parseInt(1000 / (new Date() - lastFrame), 10);
  lastFrame = new Date();
  window.requestAnimationFrame(rot);
}

function kill() {
  var divs = document.querySelectorAll('div.reg');
  for(var i = 1; i < divs.length; i++){
    divs[i].parentElement.removeChild(divs[i]);
  }
}

rot()

div {height: 50px; width: 50px; margin: 2px; display: inline-block; background: #eee;}

div.reg {background: #ccc}

<button onclick="dbl()">Double dark divs</button>
<button onclick="toggle()">Toggle dark divs</button>
<button onclick="kill()">Kill dark dupes</button>FPS: <span></span>
<br>
<div></div><div class="reg"></div>

The JS calculations here are very heavy (on purpose) and you can see they keep running in the background.