css 动画持久结束状态答案

【问题标题】：css animations persistent end statecss 动画持久结束状态
【发布时间】：2012-06-21 01:06:03
【问题描述】：

我有一个 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 完成？

【问题讨论】：

【解决方案1】：

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

“动画填充模式”属性定义了应用的值执行时间之外的动画

来自Spec.

【讨论】：