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.