看不见时,CSS动画仍然会发生吗？

Question

我有一个元素作为加载指标.这是一直存在我的网页上,并显示/通过添加/移除它改变其不透明度和z-index的一类隐.该元素包含使用CSS动画的图像.

我担心这会对页面效率低下,因为当加载器不在屏幕上时动画可能仍然无形地发生.

我试过的

我这样做是为了动画只在元素有visible类时才起作用,但是这会导致一个刺耳的效果,因为一旦删除了类,动画就会停止,然后加载器才会有淡入淡出的变化.添加transition到动画似乎没有任何影响.

Answer 1

是的他们这样做.请看以下小提琴==> JS FIDDLE SHOWING CHANGE

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 */
}

HTML

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

JS

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

^显示h3中的结果