TL DR
My question is: does the div hide the actual termination of the animation? Or are they still using processor cycles?
Not sure how the state of the animation is defined internally, but does not use processor cycles when they are hidden.
How about animations without CSS?
CPU loops are not used for rendering, but they are used for computing JavaScript 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) does not seem to spend any cycles on invisible elements. It can change both in browsers and in browser versions. I assume that older browsers do not care about this, but all modern browsers will try to save as much CPU as possible.
Here's a snippet / proof, try doubling the dark divs until it starts to choke, then switch them and see how the light of the 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 (not CSS)
For things other than CSS, the browser will not spend any cycles on rendering the animation, but 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>
JS calculations here are very heavy (on purpose), and you can see that they continue to work in the background.