animation - 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/forwards/both；

'animation-fill-mode' 属性定义了动画在执行时间之外应用的值

从规范。