Fade in/Fade out of header menu

Hey there! I am customizing the Dawn theme, mostly learning Shopify/Liquid. I wanted to add a fade-in/fade-out animation to the menu bar. In editing component-mega-menu.css, I was able to get the fade-in to work by adding

.mega-menu[open] .mega-menu__content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  **transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;**
}

But it won’t fade out, and if I try adding any transition attributes to .mega-menu__content or .js .mega-menu__content, it doesn’t fade out and breaks the fading in. I was wondering if it had something to do with the way the components use the transform property, but CSS is not my strong suit so I’m stumped.

Thanks!

visibility and display properties typically can’t be transitioned.
But there’s some new CSS in town, the allow-discrete rule will potentially be what you’re looking for here.