使用JavaScript检测特定的CSS3关键帧

如何检测动画是否达到特定关键帧？（例如50%或75%）

这就是我所尝试的：

element.addEventListener("animationend", AnimationListener, false);

但它只支持animationstart、animationiteration和animationend

---

使用提供的示例提琴，您基本上希望知道的是

#sun

元素的

bottom

属性的值何时等于

100px

。您可以使用检查该值，清除等于

100px

的间隔，然后执行您想要的任何代码，如下所示：

var style=window.getComputedStyle（document.getElementById（“sun”），
间隔=设置间隔（函数（）{
if（parseInt（style.getPropertyValue（“底部”））==100）{
间隔时间；
控制台日志（“达到50%）；
}
},1);
太阳{
动画：日出1秒轻松；
底部：0；
背景：#ff0；
边界半径：50%；
高度：50px；
位置：绝对位置；
宽度：50px；
}
@关键帧日出{
0%{
底部：0；
左：0；
}
50%{
底部：100px；
}
100%{
底部：0；
左：400px；
}
}

---

据我所知，唯一的选择是使用计时器并使用您自己的计算。刚刚检查了规格，似乎有一个

elapsedTime

属性，但它仍然会告诉你时间，它代表的百分比仍然需要计算。请提供一个令人惊叹的动画示例。@Shaggy你检查过小提琴吗？@Beckham:对不起，不知道我怎么会错过它！有一些有用的见解。