How can I make an animation like this?

I want to make something like this, just like in the code I wrote, but the problema is that when the animation is back to it's original position, the links stays there but invisible, and I want them to stay in display: none :(

When I always try to make that those links stays in display: none the animation looks like that does not want to work...

HTML

<body>
<nav>
    <div class="hamburger">
        <span class="hamburger_stick stick1"></span>
        <span class="hamburger_stick stick2"></span>
        <span class="hamburger_stick stick3"></span>
    </div>
    <ul class="nav_list_container">
        <a class="nav_list_link link1" href="">Servicios</a>
        <a class="nav_list_link link2" href="">Contacto</a>
    </ul>
</nav>

<header>
    <div>
        <h1>Eliana Moura</h1>
        <h2>Enfermera Profesional Matriculada</h2>
        <p>Más de 10 años apoyando y sanando pacientes en la Ciudad de Santa Fe.</p>
        <p>Y hoy, ¿cómo te sentís? ¿En qué te puedo ayudar?</p>
        <a href="">Leer más</a>
    </div>
    <div>
        <img src="" alt="">
    </div>
</header>

CSS

@import "standar";

$color1: #dcf1fb;
$color2: #f8b14c;
$color3: #777887;
$color4: #384e5e;
$typo: 'Ubuntu', sans-serif;

* {
    font-family: $typo;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: $color1;
}

header {
    background-color: $color1;
}

nav {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

nav .nav_list_container {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

nav .nav_list_container .nav_list_link {
    margin: 10px 5px;
    padding: 10px 8px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0;
    transform: translateX(20px);
    transition: all .2s ease-in-out;
}

.hamburger {
    width: 40px;
    height: 30px;
    line-height: 5px;
    padding: 15px 20px;
}

.hamburger .hamburger_stick {
    display: inline-block;
    width: 100%;
    height: 3px;
    margin: auto;
    background-color: #000000;
    transition: all .2s ease-in-out;
}

.selected {
    transform: rotate(-45deg) translate(-3px, 8px);
}

.selected2 {
    transform: translateX(20px); opacity: 0;
}

.selected3 {
    transform: rotate(45deg) translate(-3px, -8px);
}

.selected4 {
    opacity: 1 !important;
    display: initial !important;
    transform: translateX(0) !important;
}

JS

$(document).ready(function() {

var selected = false

$(".hamburger").click(function() {
    $(".stick1").toggleClass("selected")
    $(".stick2").toggleClass("selected2")
    $(".stick3").toggleClass("selected3")
    $(".nav_list_link").toggleClass("selected4")
})

})