当父元素具有可见性时CSS3动画是否运行：隐藏？答案

【问题标题】：Does a CSS3 animation run when parent element has visibility: hidden?当父元素具有可见性时CSS3动画是否运行：隐藏？
【发布时间】：2016-01-19 14:43:34
【问题描述】：

我定义了一个 CSS3 animation（并关联了@keyframes）：

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

即使你看不到它，如果父元素有visibility: hidden，这个动画是否正在运行（并消耗资源）？

【问题讨论】：

我该怎么做？试试看 CPU 负载？可见性：隐藏 = 什么都看不到，可见性：可见 = 看动画。
使用分析器，或生成 100 个这样的动画并测试是否有隐藏可见性，看看是否有区别。
在任何情况下，您都可能需要使用特定的 UA 进行标记，因为某个操作需要多少资源可能取决于实现。
@Kong：据我所知，可见性设置不会停止动画。即使元素具有隐藏的可见性，动画也会继续运行，因为元素仍然存在，它只是隐藏。

标签： css css-animations

【解决方案1】：

是的，即使父容器有visibility:hidden，动画也会继续运行，因为元素仍然存在并且它只是被隐藏了。在下面的 sn-p 中，您可以验证 .output div 的内容，以查看它是否一直在运行，marginLeft 一直在变化。

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>

根据W3C Spec，仅设置display: none 会终止正在运行的动画（我们也可以认为它不会启动动画）。

将显示属性设置为“无”将终止应用于元素及其后代的任何正在运行的动画。如果元素的显示为“none”，则将显示更新为“none”以外的值将启动通过“animation-name”属性应用于元素的所有动画，以及应用于显示以外的后代的所有动画'无'。

正如你在下面的sn-p中看到的，当display设置为none时动画终止，当设置回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>

【讨论】：

感谢您提供的提示：无。

【解决方案2】：

visibility: hidden; 不停止动画。它将继续动画只是不向您显示。但是分配给它的空间会在那里。

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

即使visibility:hidden，您也可以在此处查看滚动条是否继续移动。

【讨论】：