Check if an CSS animation is completed with JQuery or JS? [duplicate]

Question

Can I do this? An example -

CSS Code

div {
  animation-name: test
  animation-duration: 5s
}
@keyframes test{
  from {background-color: red;}
  to {background-color: blue;}    
}

Now, how do I make JQuery check if the animation is done? Plus I actually want to do this with a string that appears one word at a time, and then ask JQuery to see if it has completed, and if it has been shown fully then a 5 sec timer starts. Can I do this??

Thanks!

You would need to listen for the animationend or webkitAnimationEnd event in js. $('.element').on('animationend webkitAnimationEnd', function() { }) — zgood
– zgood, Commented Mar 30, 2018 at 20:04
Ok, but if I use the webkit (I am on chrome) to add an event listener, how can I use that to trigger the timer? I am seeing this right now - w3schools.com/jsref/event_animationend.asp. Thanks! — Coder14
– Coder14, Commented Mar 30, 2018 at 20:07
Oh. I see. Can I define the function outside? and then run it? — Coder14
– Coder14, Commented Mar 30, 2018 at 20:08

zgood · Accepted Answer · 2018-03-30 20:13:10Z

1

You need to listen to for the animationend and webkitAnimationEnd events in javascript.

Like this:

$('div').on('animationend webkitAnimationEnd', function() { 
    alert('end');
});

$('div').on('animationend webkitAnimationEnd', function() { 
	alert('end');
});

div {
    width: 100px;
    height: 100px;
  animation-name: test;
  animation-duration: 5s
}
@keyframes test {
  from {background-color: red;}
  to {background-color: blue;}    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

answered Mar 30, 2018 at 20:13

zgood

12.7k2 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Check if an CSS animation is completed with JQuery or JS? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related