CSS动画在不可见时仍然会发生吗？

我有一个元素作为加载指示器。它总是出现在我的页面上，并通过添加/删除一个改变其不透明度和z索引的类来显示/隐藏。元素包含使用CSS设置动画的图像

我担心这会对页面效率低下，因为当加载程序不在屏幕上时，动画可能仍在无形中发生

我尝试过的

---

我这样做是为了使动画只在元素具有可见的类时才起作用，但这会导致一种不和谐的效果，因为在加载程序更改为淡出之前，一旦移除类，动画就会停止。向动画添加

过渡

似乎没有任何效果。

虽然不确定元素隐藏时动画是否仍在元素上发生，但可以使用

动画迭代计数

在一定次数的迭代后结束动画

• 使用

  class=“is hidden”

  在不需要时隐藏加载程序
• 将

  隐藏时

  应用于加载程序，将微调器的

  动画迭代计数

  从

  无限

  更改为，例如

  5

这将使微调器再旋转5次，然后结束动画。这5次旋转将在装载机淡出时进行。显然，如果5不足以覆盖淡出持续时间，则可以增加迭代/旋转的数量

（添加和删除

。隐藏到
.loader
）

是的。请参阅以下小提琴==>

css

@keyframes anim{
    0%{margin-left:0;}
    100%{margin-left:80%;}
}
@-webkit-keyframes anim{
    0%{margin-left:0;}
    100%{margin-left:80%;}
}
h3{
    float:left;
    position:absolute;
}
div{
    visibility:hidden;
    background:black;
    width:50px;
    height:50px;
    float:left;
    animation: anim 5s;
    -webkit-animation: anim 5s infinite; /* Safari and Chrome */
}

setInterval(function() {
    jQuery('h3').text('Margin is:'+ jQuery('div').css('margin-left'))
},1000);

html

<div id="div">
   Div
</div>
<h3></h3>

^在h3中显示结果
在删除visible类之前将其淡出如何？@PatsyIssa我可以这样做，但我尝试不使用JavaScript（除非它是绝对必要的）。感谢您完美且演示良好的解决方案：）作为旁白，我从来没有想过以您在示例中的方式构造加载微调器，但它非常酷。再次感谢！很好的测试。请注意，如果更改为
display:none
，则h3不会更新。
setInterval(function() {
    jQuery('h3').text('Margin is:'+ jQuery('div').css('margin-left'))
},1000);