CSS FadeIn and FadeOut trigerred by onclick with only css (100% pure) if not possible less resources as possible (no jquery, and no js to animation)

Question

I was trying to make a 100% pure css animation, fadein and fadeout when i click on hamburguer menu to reveal the sidebar, (the backdrop should showing opacity like 500 miliseconds) (like jquery fadein) and when i click inside the sidebar to close the menu (the backdrop should hidde the opacity in 2 seconds) (like jquery fadeout) You can see the version of jquery code here: https://cdpn.io/gilperon/fullpage/ZErBzvY

This is a very simple code, to open menu i put the event on hamburguer icon onclick=' $('#menu-backdrop').fadeIn(500);' and close to close, i put onclick=' $('#menu-backdrop').fadeout(2000);'

If it is not possible to make 100% css pure the animation, since it should be activated by onclick, maybe use just the javascript pure to onclick to add class, and the animation by done via css I have a lot of ways using height:0 and key frames, but it was not possible to make the animation fadeout, fadein it works.

I make a code that workds to fadein, but to fadeout not working: Another options are welcome, maybe using visibility, or other ways to show and hidden the animation, display:none usually not works with css animation

#menu-backdrop {
        display: none;
        animation:fadeOut 5s linear;
        }

        #menu-backdrop.exibir {
        display: block;
        animation:fadeIn 0.5s linear;
        }



        @keyframes fadeIn {
            0% {
                opacity:0
            }
            100% {
                opacity:1;
            }
        }

        @keyframes fadeOut {
            0% {
                opacity:1
            }
            100% {
                opacity:0;
            }
        }

If anyone can post a work solution should be great, thank you very much guys.

Answer 1

Okay what you need is a transition, and you need to move away from your display property as it will break your animations and transitions since you cannot animate or transition that property in CSS.

A quick example:

const button = document.querySelector( 'button' );
const nav = document.querySelector( 'nav' );

button.addEventListener( 'click', event => {
  
  event.preventDefault();
  
  nav.classList.toggle( 'active' );
  
});

nav {
  position: fixed;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: red;
  transition: opacity .4s;
  /* This should be set to 0, but to make the point
   * of pointer-events clear, I will set it to slightly
   * higher so you can see there's no interaction
   * with the nav. */
  opacity: .1;
  pointer-events: none;
}
nav:hover {
  /* If you can interact with the navigation,
   * you will see it change color. */
  background: blue;
}
nav.active {
  opacity: 1;
  pointer-events: all;
}
nav + button:before {
  content: 'Open ';
}
nav.active + button:before {
  content: 'Close ';
}

<nav></nav>
<button>Nav</button>

The above shows you that by combining pointer-events: none with opacity you can effectively hide your menu. I added the :hover state for the <nav> to show that you cannot click the <nav> when it is open, and you should therefor consider this element invisible to the user.