Css animation constant state

Question

I have a div element that acts as a global contianer for my webpage, I also have a div element inside this that I use as a curtain, i.e. when activated, it covers the entire page with a dark translucent layer (just like a lightbox), so the page is essentially disabled and the warning window or image window, etc. etc. can be displayed on top.

I can easily achieve this effect and functionality using javascript, but I wanted to know if this can only be achieved using css animation?

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

therefore, when the curtain is not active, it should have an opacity of 0 and preferably display:none; so that he is not on the sidelines. Then, when it is activated, it should have display:block , and the opacity is 0.8. Then, when it is deactivated, the opacity should return to 0, and then should be set to display:none;

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

Answer 1

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

The 'animation-fill-mode' property determines which values ​​apply animation outside of runtime.

From Spec.