How can I repeatedly toggle a CSS animation class without a second click?

I want the colour and size of a div box to animate and return to its original values when a button is clicked. Here is my code example:

document.getElementById("andAction").addEventListener("click", function() {
    document.getElementById("box").classList.toggle("animi");
})
.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width:20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}


@keyframes blob {
  0%  { 
         background-color: #999;
      }
  50% { 
        background-color: #F9086D;
        transform: scale(2);
        background-color: red;
        border-radius: 20px;
      }
  100% { 
        background-color: #999;          
      }
 }

.animi {
  animation-name: blob;
  animation-duration:3s;
  animation-iteration-count:1;
}
<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>

Problem

My problem is that I am doing it with toggle. Which means I have to click twice on the second time. Another variety was classList.add and then remove again. This leads to no result because the animation is not started for the user. the only thing I could do would be to work with timeout.

Question

I have the feeling there is another way?

Answer

Just add some js to remove the class automatically after the animation finished and change your initial behaviour to not toggle but just add the class. You can achieve that by using https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event.

const box=document.getElementById("box");

document.getElementById("andAction").addEventListener("click", function() {
  box.classList.add("animi");
});

box.addEventListener('animationend', () => {
  box.classList.remove("animi");
});
.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width: 20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

@keyframes blob {
  0% {
    background-color: #999;
  }
  50% {
    background-color: #F9086D;
    transform: scale(2);
    background-color: red;
    border-radius: 20px;
  }
  100% {
    background-color: #999;
  }
}

.animi {
  animation-name: blob;
  animation-duration: 3s;
  animation-iteration-count: 1;
}
<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>