Google chrome chrome addeventlistener动画事件

除了Google Chrome（Safari未经测试），以下代码在任何情况下都可以正常工作。我认为问题在于addEventListener注册中需要

**e.addEventListener("animationiteration", listener, false);**

启动bmViewer（）函数

HTML:

CSS3动画：

@keyframes bmview { from {opacity:0.0; } to {opacity:1.0;} }
@-webkit-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }
@-moz-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }
@-o-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }

.paused
{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused; 
animation-play-state:paused;
}
.play
{
animation: bmview 7s linear 0s infinite;
-webkit-animation: bmview 7s linear 0s infinite;
-moz-animation: bmview 7s linear 0s infinite;
-o-animation: bmview 7s linear 0s infinite;

-webkit-animation-play-state:running;
-moz-animation-play-state:running;
-o-animation-play-state:running; 
animation-play-state:running;
}

---

在基于webkit的浏览器中，事件

animationStart、animationIteration等

的前缀是

webkit

。 因此，只需为事件

webkitAnimationStart、webkitAnimationEnd、webkitAnimationIteration

添加事件监听器，您应该会做得很好

---

请注意，在基于webkit的浏览器中，Opera和IE10的前缀不同。事件

animationStart、animationIteration等的前缀为
webkit
。
因此，只需为事件
webkitAnimationStart、webkitAnimationEnd、webkitAnimationIteration
添加事件监听器，您应该会做得很好

请注意Opera和IE10的不同前缀，但有一些非常奇怪的例外，我正在尝试记录事件。当我在控制台中以树的形式打开事件对象时，类型等于“animationstart”。但是，当我在代码中得到它时，类型等于“webkitAnimationStart”。不知道，为什么…
Webkit
namespace再次罢工。。。是的，但有一些非常奇怪的例外——此刻，我正试图记录这一事件。当我在控制台中以树的形式打开事件对象时，类型等于“animationstart”。但是，当我在代码中得到它时，类型等于“webkitAnimationStart”。不知道，为什么…
Webkit
namespace再次罢工。。。pfffff
window.onload=function()
{
var e = document.getElementById(**"bmImageDiv"**);
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);
.
.
.
}

function listener(e)
{
switch(e.type) 
{
case "animationstart":
actionLog("Started: elapsed time is " + e.elapsedTime);
break;
case "animationend":
actionLog("Ended: elapsed time is " + e.elapsedTime);
break;
case "animationiteration":
actionLog("New loop started at time " + e.elapsedTime);
var index = document.getElementById("bmNext").value; 
bmViewer(index);
break;
default: 
actionLog(e.type+", "+document.getElementById"bmImageDiv").style.animationPlayState);
document.getElementById("bmImageDiv").className = "play";  
}
}

@keyframes bmview { from {opacity:0.0; } to {opacity:1.0;} }
@-webkit-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }
@-moz-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }
@-o-keyframes bmview { from {opacity:0.0;} to {opacity:1.0;} }

.paused
{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused; 
animation-play-state:paused;
}
.play
{
animation: bmview 7s linear 0s infinite;
-webkit-animation: bmview 7s linear 0s infinite;
-moz-animation: bmview 7s linear 0s infinite;
-o-animation: bmview 7s linear 0s infinite;

-webkit-animation-play-state:running;
-moz-animation-play-state:running;
-o-animation-play-state:running; 
animation-play-state:running;
}