Is CSS3 animated when the parent has visibility: hidden?

Question

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

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

Even if you don’t see it, does this animation (and resource consumption) work if the parent has visibility: hidden ?

Answer 1

Yes, the animation continues to work even if the parent container has visibility:hidden , because the element still exists, and it is only hidden. In the snippet below, you can check the contents of the .output div to see that it continues to work, and marginLeft continues to change.

 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> 

---

According to the W3C Spec , only setting display: none completes the running animation (and we can accept this because we will not start the animation).

Setting the display property to "none" will terminate any running animation applied to the element and its descendants. If the element has a no display, updating the display to a value other than none, all animations applied to the element will be applied to the animation name property, as well as all animations applied to children with a display other than none "

As you can see in the fragment below, the animation ends when the display parameter is set to none , and restarts from the first keyframe when it is set 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; Doesn't stop the animation. It will continue the animation, just not displayed to you. But the space allotted to him 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

Here you can verify that the scrollbar continues to move, even if visibility:hidden .