Ligne bleu qui se forme lors d'une animation

Bonjour, lors de l'animation de ma barre de navigation, j'obitiens des lignes bleu (couleur arrière plan de ma div) verticale comme si l'écran était cassé. Ensuite elle disparaissent quelque secondes plus tard.
J'aimerais beaucoup régler ce problème peu estétique. Je vous mets le code ci dessous ! Merci d'avance !

JS :

var isClick = false;

$('.burger').click(()=>
{
  if(isClick == false)
  {
     $('nav .links').animate({left : "-50%"},500);
     setTimeout(500);
     isClick = true;
  }else
  {

    $('nav .links').animate({left : "0%"},500);    
    setTimeout(500);
    isClick = false;
  }

});

HTML :

<ul class="links">
                <li><a href = "/Matiere.php">Matières</a><hr></li>
                <li><a href="/liste_tchat.php">Tchat</a><hr></li>
                <li><a id = "setpseudoOnBalise"></a><hr></li>
                <li id="ConnectBalise"><a href="/profil.php" id ="logElement"><img src = "/images/Nuage.png" id ="logoProfil"></a><hr></li>

            </ul>

CSS :

nav .links
{

background-color: #7CF2E2;
width : 50%;
position : fixed;
top : 10vh;
left : -50%;
display : flex;
flex-direction: column;
justify-content: inherit;
padding : 0;

}

Voilà c'est tout pour le code. Prévenez moi si vous aussi vous avez ce bug d'affichage :/