Animating display: block

Question

I have a top-menu in my project and want to animate the appearance of it. So how can I animate display: block? It doesn't work with transition.

.navigation {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateY(-200%);
    transition: transform 0.3s ease-in-out,
        opacity 0.3s linear, display 0.3s ease-in-out;
    display: none;

    &.active-menu {
        display: block;
        opacity: 1;
        transform: translateY(0%);
    } 

  
  }

<nav class="navigation">
    <ul class="category-menu">
        <li>
                <img src="images/panel-icons/pizza.svg" alt="pizza">
        </li>
        <li><img src="images/panel-icons/sushi.svg" alt="sushi"></li>
        <li><img src="images/panel-icons/burger.svg" alt="burger"></li>
        <li><img src="images/panel-icons/bowl.svg" alt="bowl"></li>
        <li><img src="images/panel-icons/salad.svg" alt="salad"></li>
        <li><img src="images/panel-icons/soup.svg" alt="soup"></li>
        <li><img src="images/panel-icons/cake.svg" alt="cake"></li>
        <li><img src="images/panel-icons/drink.svg" alt="drink"></li>
    </ul>
</nav>