I have a div element serving as the main container for my webpage. Inside this, there is another div element which functions as a curtain - when activated, it covers the entire page with a dark semi-transparent layer similar to a lightbox. This deactivates the page and allows for the display of warning dialogs or picture boxes on top.
I can easily accomplish this effect and functionality using JavaScript. However, I am curious to know if it could be achieved solely through CSS animations?
<div id='globalCon'>
<div id='curtain' class='enabled'></div>
<div id='contentA'></div>
<div id='contentB'></div>
...
</div>
When the curtain is not active, it should have an opacity of 0 and ideally be set to display:none; to keep it hidden. Upon activation, it should change to display:block and animate the opacity to 0.8. Upon deactivation, the opacity should animate back to 0, and then it should revert to display:none;
While I can achieve this easily with JavaScript, I am interested in exploring whether and how it can be done using only CSS.