css动画持久化结束状态 [英] css animations persistent end state

问题描述

我有一个div元素作为我的网页的全局contianer，我也有一个div元素里面，我用作窗帘，即当它被激活时，它覆盖整个页面在一个暗半透明层像灯箱），所以页面基本上被停用，并且可以在顶部显示警告对话框或图片框等。

I have a div element which acts as a global contianer for my webpage, I also have a div element inside this which I use as a curtain i.e. when it is activated it covers the whole page in a dark semi transparent layer (just like a lightbox) so the page is essentially deactivated and a warning dialog or picture box, etc, etc can be displayed on top.

我可以轻松实现这个效果和功能与JavaScript，但我想知道是否它可以实现纯粹与CSS动画？

I can achieve this efect and functionality easily with javascript but I wanted to know whether it could be achieved purely with css animations?

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

所以当窗帘不活动时，它应该具有不透明度0，并且优先显示 ：none; 以保持它的方式。然后当它被激活它应该有 display：block 和不透明度动画到0.8。然后当它被禁用时，opacity应该动画回到0，然后应该设置回 display：none;

so when curtain is not active it should have opacity 0 and prefferably be display:none; to keep it out of the way. Then when it is activated it should have display:block and opacity animate to 0.8. Then when it is deactivated, opacity should animate back to 0 and then it should be set back to display:none;

推荐答案

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

You can use: animation-fill-mode: none/backwards/forwards/both;

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

The ‘animation-fill-mode’ property defines what values are applied by the animation outside the time it is executing

规格

这篇关于css动画持久化结束状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！