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

Question

I have a css keyframe animation which loops. animation-iteration-count: infinite Now when I click a button I want the animation to finish the current loop and then stop.

this question seems related, but animationiteration webkitAnimationIteration callbacks don't seem to be called at the end of the keyframe animation, but more often.

EDIT: This turned out to almost be the correct solution, only that it can't handle multiple animations. For more info see my answer below.

This example shows my animation, and on hover I want to try to finish the current loop and then stop. This includes the answer proposed by @Alex Gru, It doesn't work if one wait for the animation to loop multiple times and then hover you can see the animation jumps. If it has not looped a full iteration and I set animation-iteration-count: 1 it works as intended.

"I've tried using webkitAnimationIteration to count iterations, but the count doesn't seems to directly correlation with the amount of loops so far." - meaning what, exactly? Please don't give us just such a more than vague statement that you tried something and it didn't work, but be explicit - minimal reproducible example of what you tried, plus a proper problem description. — C3roe
– C3roe, Commented Jan 18, 2022 at 15:01
document.getElementById("animated-thing").addEventListener("webkitAnimationIteration", function (event) { But the function is not called when the loop finished but more often in between. — T. J.
– T. J., Commented Jan 18, 2022 at 15:06
This is not necessarily relevant to the question just a thing i tried. — T. J.
– T. J., Commented Jan 18, 2022 at 15:08
I've re framed the question. This time not including what didn't work. There is no need for a minimal example, since explaining false approaches - might aid people helping - but certainly complicated the question. — T. J.
– T. J., Commented Jan 18, 2022 at 15:19

T. J. · Accepted Answer · 2022-01-20 17:27:28Z

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 )

gru · Accepted Answer · 2022-01-18 15:29:38Z

1

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

answered Jan 18, 2022 at 15:29

gru

3,2197 gold badges29 silver badges47 bronze badges

3 Comments

T. J. Over a year ago

animation: none stops it immediately. If I use -webkit-animation-iteration-count: 1 only It works, but only if the animation didn't play a full iteration yet. If the animation looped e.g.: 3 times, if i then set ` -webkit-animation-iteration-count: 1` it just jumps to the end of the animation

T. J. Over a year ago

I've added a jsfiddle showing the problem. Here I add the stop class on hover. If you wait for the animation to loop more then once and then hover you can see it jump

T. J. Over a year ago

Basically I need a way to set -webkit-animation-iteration-count: current-count + 1

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related