Problem with transition

[grindd]

Hi, i have problem with transition, it just doesnt work.
I do not know what I am doing wrong

Here is codepen: https://codepen.io/fdsfsdfsgsdgsd/pen/mdmXLyv

[miles]

What is it supposed to do?

[grindd]

#nav-mobile element should appear gradually (3s)

[jsdisco]

It’s because you’re switching between display:none and display:block.

You can use visibility instead:

#nav-mobile {
  visibility:hidden;
  ...
  opacity: 0;
  transition: opacity 3s;
}

#nav-mobile.nav--active {
  visibility:visible;
  opacity: 1;
}