CSS动画执着最终状态(css animations persistent end state)

我有它充当我的网页全球contianer div元素，我也有这里面，我的水帘，即使用一个div元素，当它被激活它覆盖整个页面在一个黑暗的半透明层（就像一个收藏夹），所以页面基本上停用，一个警告对话框或图片框，等，等可以在上面显示。

我可以很容易地用JavaScript实现这种效应和功能，但我想知道是否可以用CSS动画纯粹是实现？

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

因此，当帘式没有激活它应具有不透明度0和prefferably是display:none; 要保持它的方式。 然后，当它被激活时它应该具有display:block和不透明度动画〜0.8。 然后，当它被去激活，不透明度应动画回0，然后它应该被设置回display:none;

就像我说的，我可以用JavaScript做到这一点很容易，我只是想知道是否以及如何可以只用CSS做什么？

Answer 1:

您可以使用：动画填充模式：无/后退/前进/两;

在“动画填充模式”属性定义什么被它正在执行时间以外的动画应用价值

从规格。

文章来源: css animations persistent end state