Does a CSS3 animation run when parent element has visibility: hidden?

Question

I have a CSS3 animation defined (and associated @keyframes):

animation: myAnimation 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;

Even though you can't see it, is this animation running (and consuming resource) if the parent element has visibility: hidden?

Answer 1

Yes, the animations continue to run even if the parent container has visibility:hidden because the element is still there and it is only hidden. In the below snippet you can verify the contents of .output div to see that it keeps running and marginLeft keeps changing.

window.onload = function() {
  var animEl = document.querySelector('.animated');
  var outputEl = document.querySelector('.output');
  window.setTimeout(function() {
    outputEl.textContent = 'Margin left when visibility becomes hidden: ' + window.getComputedStyle(animEl).marginLeft;
    document.querySelector('.wrapper').style.visibility = 'hidden';
    window.setTimeout(function() {
      outputEl.textContent = 'Margin left when visibility becomes visible: ' + window.getComputedStyle(animEl).marginLeft;
      document.querySelector('.wrapper').style.visibility = 'visible';
    }, 1000);
  }, 1000);
}

.wrapper{
  white-space: nowrap;
}
.wrapper > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
.animated {
  animation: move 3s linear infinite;
}
@keyframes move {
  to {
    margin-left: 300px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='wrapper'>
  <div class='animated'></div>
  <div class='sibling'></div>
</div>
<div class='output'></div>

---

As per W3C Spec, only setting display: none terminates a running animation (and we can take that as won't start an animation also).

Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’, updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property, as well as all animations applied to descendants with display other than ‘none’.

As you can see in the below snippet, the animation is terminated when display is set to none and is restarted from first keyframe when it is set back to block.

window.onload = function() {
  var animEl = document.querySelector('.animated');
  var outputEl = document.querySelector('.output');
  window.setTimeout(function() {
    outputEl.textContent = 'Margin left when display becomes none: ' + window.getComputedStyle(animEl).marginLeft;
    document.querySelector('.wrapper').style.display = 'none';
    window.setTimeout(function() {
      outputEl.textContent = 'Margin left when display becomes block: ' + window.getComputedStyle(animEl).marginLeft;
      document.querySelector('.wrapper').style.display = 'block';
    }, 1000);
  }, 1000);
}

.wrapper {
  white-space: nowrap;
}
.wrapper > div {
  display: inline-block;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
.animated {
  animation: move 3s linear infinite;
}
@keyframes move {
  to {
    margin-left: 300px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='wrapper'>
  <div class='animated'></div>
  <div class='sibling'></div>
</div>
<div class='output'></div>

Answer 2

visibility: hidden; Does not stop animation. It will continue animation just doesn't display to you. But the space allocated to it will be there.

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  margin-left:100%;
  visibility: hidden;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>

Fiddle

You can check here scrollbar is keep moving even if visibility:hidden.