Div contents not animating when changing 'display' value

Question

I successfully use this code to adjust the position of menu items:

this.scrollY > 200 ? navElement.style.display = "block" : navElement.style.display = "flex";

They move to be aligned vertically or horizontally according to scroll value. But I cant get them to move smoothly.

The html:

<nav class="header_menu">
            <div class="testo_links_titolo"><a href="#post_longest_day" >PORTFOLIO</a></div>
            <div class="testo_links_titolo"><a href="#about" >ABOUT</a></div>
            <div class="testo_links_titolo"><a href="#contact" >CONTACT</a>
            </div>
</nav>

The css:

.header_menu {
    position: relative;
    transition: all 0.6s ease-out;
}

.testo_links_titolo {
    font-family: 'Oswald', sans-serif;
    position: relative;
    transition: all 0.6s ease-out;
}

I probably am quite confused...