Javascript 检查CSS动画是否使用JQuery或JS完成？

我能做这个吗？例如——

CSS代码

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

现在，如何让JQuery检查动画是否完成？另外，我实际上想用一个一次显示一个单词的字符串来完成这项工作，然后让JQuery查看它是否已经完成，如果它已经完全显示，那么5秒的计时器将启动。我能做这个吗

---

谢谢

您需要收听javascript中的

animationend

和

webkitAnimationEnd

事件

像这样：

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

$（'div'）。在（'animationend webkitAnimationEnd'，function（）{
警报（“结束”）；
});
div{
宽度：100px；
高度：100px；
动画名称：测试；
动画持续时间：5s
}
@关键帧测试{
来自{背景色：红色；}
至{背景色：蓝色；}
}

P.S.我在Jquery 3.3.1中，您需要收听js中的
animationend
或
webkitAnimationEnd
事件<代码>$（'.element'）。在（'animationend webkitAnimationEnd'，function（）{}）上

Ok，但是如果我使用webkit（我在chrome上）添加事件侦听器，我如何使用它来触发计时器？我现在看到了-。谢谢哦我懂了。我可以在外部定义函数吗？然后运行它？