Keyframe - animation not ending when mouse is removed?

Question

css

When using keyframes (overlaying animation using the corresponding animation: ... property on mouse hover), the animation "flies" and does not end when the mouse is removed.
For example, I have a block
<div class="cube"> </div>
And I want it to increase-decrease-increase when hovering the mouse over 0.8 seconds. I do:

.cube{
animation: bounce .8s 1 ease;
}
@keyframes bounce{
0%{
   transform: scale(1);
}
35%{
   transform: scale(0.8);
}
60%{
   transform: scale(1.1);
}
100%{
   transform: scale(1);
}
}

I don’t understand point-blank where I could be stupid - but if you remove the mouse from this cube, the animation flies without completing it, but how to delay it to the end, of course, preferably using vanilla CSS - xs. I will be grateful for your help!

Answer 1

I came up with the solution myself. The crutch is creepy, but...
An element with a dog function, for example, a();
This function has one attribute that takes the Id value, it turns out something like this:
JS in two lines

function a (gotId) {
   var id_gotId = document.getElementById(gotId); // пихаем DOM-обращение в переменную, дабы не засорять копипастом код
   id_gotId.setAttribute("class", "animation"); // навесили на элемент класс с анимацией
   id_gotId.setAttribute("onmouseover", " "); // исключаем возможность повторного наведения мыши во время анимации
   setTimeout(function(){
     id_gotId.setAttribute("class", " "); // убираем класс для возможности повторного применения анимации
     id_gotId.setAttribute("onmouseover", "a(getAttribute('id'))"); // возвращаем onmouseover-ивент
    }, 750); // время таймера
  }

Well, actually, the CSS itself

.animation{
  animation: bounceInAnim .75s 1;
}

@keyframes bounceInAnim {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  10% { 
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  30% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% { 
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to { 
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

Of course, it would be more logical to do this through addEventsListener, but I'm too lazy :) Those who also encounter this problem will understand the essence.

Answer 2

but if you remove the mouse from this cube, the animation crashes without ending.
Explain what is meant by the word "flies"