css动画持久结束状态

Question

我有一个div元素作为我的网页的全局contianer，我也有一个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

您可以使用：     animation-fill-mode：none / backwards / forward / both;

  

'animation-fill-mode'属性定义应用的值   动画执行时的动画

来自Spec.