When you add animation to the same object, why does the object always start animating in its initial state from the second animation?

add 2 animations to box by clicking.
after the first animation is complete, click add second animation. At this point, box returns to its original state for a second animation.
animation-fill-mode has been set to forwards, but it will go back to its original state before performing a second animation.
how can I solve the problem of going back to the original state?
the following is the code, which uses jQuery. Using jQuery"s animate function can solve the problem, but I want to know why I use JavaScript to go back to the original state and then perform the animation.

-sharp-sharp HTML -sharp-sharp
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animeation</title>
    <link rel="stylesheet" href="main.css" type="text/css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="anime.js"></script>
  </head>
  <body>
    <div class="box"></div>
    <button type="button" name="button" id="btn">Click</button>
  </body>
</html>

********************************************************************************

-sharp-sharp CSS -sharp-sharp
body{
  margin: 0 auto;
  padding: 0;
}

.box{
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.5);
}

-sharpbtn{
  position: absolute;
  top: 110px;
  left: 20px;
}

.ltr1{
  animation-name: ltr1;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
}

.ltr2{
  animation-name: ltr2;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
}

/* Animation */
@keyframes ltr1 {
  0% {left: 0px}
  100% {left: 100px}
}

@keyframes ltr2 {
  0% {left: 100px}
  100% {left: 200px}
}

********************************************************************************

-sharp-sharp Javascript -sharp-sharp
$(document).ready(function(){

  var btn = $("-sharpbtn")
  var time = 0
  var ad = ["ltr1","ltr2"]

  $("-sharpbtn").click(function(){
    $(".box").addClass(ad[time])
    time += 1
  })
})

.move-box { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.2s; animation-fill-mode: backwards; } /* Animation */ @keyframes move { 0% {transform: translateX(-100px);} 100% {transform: translateX(0);} }