对于无限CSS动画，是否有与animationEnd相同功能的东西？(Is there something with the same function as animationEnd for inf

对于无限CSS动画，是否有与animationEnd相同功能的东西？(Is there something with the same function as animationEnd for infinite CSS animations?)

所以，我有一个小脚本，发出一个警告说“完成！” 动画结束时

是否有一个函数可以为无限动画做同样的事情，即。 每次循环结束时执行一些事情？

http://jsfiddle.net/RJ55N/

JavaScript的：

$('#dot1').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { alert('done!'); });

CSS：

#dot1{ width:10px; height:10px; background:black; animation:one 1s 1; } @keyframes one { from {width:10px; height:10px; } to {width:100px; height:100px; } }

So, I've got this small script that sends out an alert that says "done!" when an animation is finished.

Is there a function that will do the same for infinite animations, ie. execute something every time a loop ends?

http://jsfiddle.net/RJ55N/

JavaScript:

$('#dot1').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) { alert('done!'); });

CSS:

#dot1{ width:10px; height:10px; background:black; animation:one 1s 1; } @keyframes one { from {width:10px; height:10px; } to {width:100px; height:100px; } }

最满意答案

这是使用animationiteration事件的W3C标准方法：

$('#dot1').on('animationiteration', function (e) {
  alert('done!')
})
 
 如果您关心浏览器支持，您也可以为以下事件添加侦听器： 
 
 
  Webkit webkitAnimationIteration  
  Opera oanimationiteration  
  IE MSAnimationIteration  
This is the W3C standard method of doing it, using the animationiteration event:
 
$('#dot1').on('animationiteration', function (e) {
  alert('done!')
})
 
If you care about browser support, you can add listeners for the following events too:
 
 
 Webkit webkitAnimationIteration 
 Opera oanimationiteration 
 IE MSAnimationIteration