html - 关键帧动画在不可见时是否也会呈现并且它们是否消耗资源？

Question

我在我的网站上使用了很多 CSS 动画，但性能并没有达到应有的水平。因此我认为可能是无限的 @keyframe仅在 时可见的动画有时会减慢网站速度。

用opacity: 0藏起来为 fadeIn动画，然后我设置 display至 none但我不确定动画是否仍然渲染并消耗资源。

一个答案将不胜感激。

Answer 1

根据 this w3c draft ， 不;动画终止:

Setting the display property to none will terminate any running animation applied to the element and its descendants.

您可以通过查看触发了哪些动画事件来验证这一点。我们将设置一个无限交替的动画，然后你可以用一个按钮来切换元素的显示:

(d => {

  const $ = d.querySelector.bind(d),
    div = $("#test-div"),
    button = $("#test-button"),
    animationEvents = [
      "animationstart",
      "animationiteration",
      "animationcancel",
      "animationend",
    ],
    animationEventHandler = e => console.log(e.type);

  for (let animationEvent of animationEvents) {
    div.addEventListener(animationEvent, animationEventHandler);
  }

  button.addEventListener("click", e => {
    const lastDisplay = div.style.display || "block";
    div.style.display = lastDisplay === "block" ? "none": "block";
    e.target.textContent = "Toggle display: " + lastDisplay;
  });

})(document);

#test-div {
  padding: 30px;
  animation: test-animation 1000ms alternate infinite steps(2, jump-none);
}

@keyframes test-animation {
  from {
    background-color: #0f0;
  }
  to {
    background-color: #f00;
  }
}

<button id="test-button" type="button">Toggle display: none</button>
<div id="test-div">test div</div>

你可以看到 animationiteration即使动画是“无限的”，一旦元素不再显示，就会停止触发。您可以由此推断动画仅在显示元素时运行。实际上，当您再次显示元素时，动画会从 0% 重新开始。