如何檢測動畫是否到達特定的關鍵幀？ （例如50％或75％）。使用JavaScript檢測特定的CSS3關鍵幀
這是我的嘗試：
element.addEventListener("animationend", AnimationListener, false);
但它支持animationstart，只有animationiteration和animationend。
http://jsfiddle.net/W3y7h/294/
使用小提琴提供的例子，什麼你基本上看就知道是時候#sun元素的bottom屬性的值等於100px。您可以通過使用getComputedStyle()檢查值，清除間隔時，它等於100px，然後執行你所希望的任何代碼，像這樣做：
var style=window.getComputedStyle(document.getElementById("sun")),
\t interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))===100){
clearInterval(interval);
console.log("50% reached");
}
},1);#sun{
animation:sunrise 1s ease;
bottom:0;
background:#ff0;
border-radius:50%;
height:50px;
position:absolute;
width:50px;
}
@keyframes sunrise{
0%{
bottom:0;
left:0;
}
50%{
bottom:100px;
}
100%{
bottom:0;
left:400px;
}
}<div id="sun"></div>要檢查多個值，只需設置一個新的時間間隔。以您的示例爲例，當動畫完成75％時，bottom屬性的值應爲50px。也就是說，在每個瀏覽器中可能並不總是完全是50px，所以相反，考慮到我們知道bottom屬性的值在此處將減少，而是檢查它是否小於或等於50：
var style=window.getComputedStyle(document.getElementById("sun")),
\t interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))===100){
clearInterval(interval);
console.log("50% reached");
interval=setInterval(function(){
if(parseInt(style.getPropertyValue("bottom"))<=50){
clearInterval(interval);
console.log("75% reached");
}
},1);
}
},1);#sun{
animation:sunrise 1s ease;
bottom:0;
background:#ff0;
border-radius:50%;
height:50px;
position:absolute;
width:50px;
}
@keyframes sunrise{
0%{
bottom:0;
left:0;
}
50%{
bottom:100px;
}
100%{
bottom:0;
left:400px;
}
}<div id="sun"></div>
據我所知道的唯一的選擇是用一個定時器和使用自己的計算。只是檢查規格，似乎有一個'elapsedTime'屬性，但它仍然會告訴你時間，它代表的百分比仍然需要計算。 – Harry
請提供一個動畫的例子。 – Shaggy
@Shaggy你檢查了小提琴嗎？ – Beckham