CSSキーフレームアニメーションのパーセンテージでJavaScriptを検出できますか

私は考えていました。私は、CSSアニメーションは、完成し開始した、あるいは、例えば、animationstart、animationiteration、animationendイベント（明らかに、我々はそこにブラウザの接頭辞が欠落している）のために聞くことによって繰り返されたとき、私は検出することができます知っている：CSSキーフレームアニメーションのパーセンテージでJavaScriptを検出できますか

document.getElementById('identifier') 
     .addEventListener("animationstart", function(){ 
      // do something... 
     });

が、私は思っていました

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#animateDiv { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    position: relative; 
    animation-name: example; 
    animation-duration: 4s; 
} 

@keyframes example { 
    0% {background-color:red; left:0px; top:0px;} 
    25% {background-color:yellow; left:200px; top:0px;} 
    50% {background-color:blue; left:200px; top:200px;} 
    75% {background-color:green; left:0px; top:200px;} 
    100% {background-color:red; left:0px; top:0px;} 
} 
</style> 
</head> 
<body> 
<div id="animateDiv"></div> 
<script> 
// what do I do here? How do I listen for the 50% event of the keyframes? 
document.getElementById('animateDiv').addEventListener('animation at 50%?', function() { 
console.log('got it'); 
}) 
</script> 
</body> 
</html>

出典

2016-07-20 Mike Sav

私はそう信じません。同時にアニメーションと並行してタイマー機能を実行しない限り。 –

http://stackoverflow.com/questions/18006099/get-set-current-keyframes-percentage-change-keyframes –

http://codepen.io/Zeaklous/pen/GwBJa – Afsar

Ello、メイト：、我々はキーフレームアニメーションの50％であるときは、次のと、たとえば私が聞くことができるか、CSSアニメーションを実行している場所を決定することが可能です。 CSSアニメーションから正確なキーフレームを取得できるかどうかはわかりませんが、私たちの提案したPaulie_Dのように、いくつかの数学を使って得ることができます。

//...... 
//when the animation starts.... 
setTimeout(function(){ 
     //Enter your stuff here 
}, 2000); //2 seconds delay, considering your animation length = 4s;

あなたはまた、使用することができますが（jQueryのを必要とします）：

$("#animated_element").bind("half_animation", function(){ 
     //Ya stuff here 
}); 
//......... 
//When the animation starts... 
setTimeout(function() 
{ 
    $("#animated_element").trigger("half_animation"); 
}, 2000);

あなたのコードに

は、あなたのアニメーションは、annimationの50％が2秒後にあるキーフレーム4S長さなので、または：

$("#animated_element").bind("half_animation", function(){ 
     once = 0; 
     setTimeout(function() 
     { 
      //Ya stuff here.... 
     }, 2000) 
}); 
//........ 
//When the animation starts 
$("#animated_element").trigger("half_animation");

私はそれがあなたを助けてくれることを望みます。

出典

2016-07-20 14:00:49

CSSキーフレームアニメーションのパーセンテージでJavaScriptを検出できますか

答えて

関連する問題