Question

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.

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>

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;

Like I say, I can do this easily with javascript, I just want to know if and how it can be done with css only?

Answer 1

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

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

From the Spec.