animation - css 动画持久结束状态

Question

我有一个 div 元素作为我的网页的全局容器，我在里面也有一个 div 元素，我用作窗帘，即当它被激活时，它覆盖整个页面的深色半透明层(只是像灯箱一样)所以页面基本上是停用的，并且可以在顶部显示警告对话框或图片框等。

我可以很容易地用javascript实现这个效果和功能，但我想知道它是否可以纯粹用css动画来实现？

<div id='globalCon'>
    <div id='curtain' class='enabled'></div>
    <div id='contentA'></div>
    <div id='contentB'></div>
    ... 
</div>

因此，当窗帘未激活时，它的不透明度应该为 0，并且最好是 display:none; 以使其不受影响。然后当它被激活时，它应该有 display:block 和不透明度动画到 0.8。然后当它被停用时，不透明度应该动画回到 0 然后它应该被设置回 display:none;

就像我说的，我可以用 javascript 轻松地做到这一点，我只是想知道它是否可以以及如何只用 css 来完成？

Answer 1

您可以使用: 动画填充模式:无/向后/向前/两者；

The ‘animation-fill-mode’ property defines what values are applied by the animation outside the time it is executing

来自Spec.