Css keyframe loop, finish iteration of animation on element with multiple animations

Here's a minimal solution for your use case:

First, add another class .stop when you want to finish the animation.

  $(".target").addClass("stop");

Define the following css styling, which finishes the current cycle and stops the animation afterwards.

.target.stop {
  -webkit-animation-iteration-count: 1;
  animation: none;
}

Also see: Finish infinite iterations cycle and stop the animation with CSS

So I found out why it didn't work. There is some additional information in how I've managed to get it to work after all, that I'll explain here.

It was my fault because there is another animation attached sub element:

<div id="a1"> <-- Main animation that should finish the loop
  <div id="a2"></div> <-- sub animation that should not be finished
</div>

That was the reason why the animation call backs where triggered more often than expected. But: I found out that I can filter by animation name!

$("#a1").on('animationiteration webkitAnimationIteration', function(e) {
/* this triggers not only when animation of #a1 iterated but also if animation of #a2 iterated */
 let animation_name = e.originalEvent.animationName;
if(animation_name == "animation1name"){
 //This will only trigger if the correct animation iterated
}
});

I hope this solution can help someone who tries to handle multiple looping animations applied to one element (or sub element)

Thanks to everyone else who helped! ( I adjusted the question title in order to highlight what the problem actually was )