super inconsistent animation in css and javascript

I want to make a scrolling button, where the text part scrolls out when you hover on it and scroll back when you stop hovering, but the animation is really inconsistent:

html

<div class="btn"><span class="button_circle"></span><button class="button" 
type="submit">SEND MESSAGE</button></div>

css

.btn{
display: flex;
align-items: center;
width: 150px;
}
.btn:hover{
 cursor: pointer;
.button{
    background-color: #3f51b5;
}
.button_circle{
    border-color: #3f51b5;
}
}
.button{
   background-color: #4f7b8a;
   border-radius: 20px;
   width: 0;
   color: #E5E4E2;
   position: relative;
   transform: translateX(-40px);
   z-index: 0;
   height: 25px;
   padding-left:30px ;
   font-size: 15px;
   text-align: center;

  }
  .full_length{
     width: 100px!important;
  }
  .no_length{
     width: 0px!important;
  }
  .button_circle{
    height: 40px;
    width: 40px;
    background-color: #bbb;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #4f7b8a;
    display: inline-block;
    z-index: 1;
 }
  .move_btn{
     animation: appear 2s 0s 1 ease;
   }
  .del_btn{
     animation: dissapear 2s forwards;
    }
   @keyframes appear{
    0%{
     width: 0;
   }
   100%{
      width: 100px;
   }
  }
  @keyframes dissapear{
     0%{
       width: 100px;
   }
    100%{
      width: 0;
   }
   }

js

var is_transitioning = false;

$(".btn").hover(appear,dissappear);


function appear() {
    if (!is_transitioning) {
      is_transitioning = true;
      $(".button").removeClass("no_length");
      $(".button").removeClass("full_length");
      $(".button").removeClass("del_btn");
      $(".button").addClass("move_btn");
  
      setTimeout(function() {
        $(".button").addClass("full_length");
        $(".button").removeClass("move_btn");
        
      }, 2000); 
    }
  }
  function dissappear() {
      $(".button").removeClass("full_length");
      $(".button").addClass("del_btn");
      setTimeout(function() {
        $(".button").addClass("no_length");
        $(".button").removeClass("del_btn");
        is_transitioning = false; // Reset transition state after the transition
      }, 2000); // Time for disappear transition
    }

this works on the first cycle, but just breaks apart during the subsequent cycles, no_length somehow gets applied when I am still hovering over the button, and when I hover off the classList is somehow both no_length and full_length, sometimes the dissappear animation just does not get finished and the bar instantly dissappear, sometimes there is lag when I hover on the button, I have tried removing every class on hover and then applying them later, I have tried to add a is_transitioning state to stop it from continuesily being executed, but none of those seem to work. any suggestion is welcomed, thank you.