Bubbling CSS Animation Event

Question

So, according to MDN (makes sense), the AnimationEvent argument has a bubble argument, but how to set its value to true? Given that the event is fired from a CSS animation.

Answer 1

Well, it turns out that CSS does indeed create event bubbles, for example:

HTML:

 <ul id="ul"> <li> <a id="a">Some text!</a> </li> </ul> 

CSS

 a { color: red; } a:hover { -webkit-animation-duration: 1s; -webkit-animation-name: change-color; } @-webkit-keyframes change-color { from { color: red; } to { color: blue; } } 

JS:

 var a = document.getElementById( 'a' ); var ul = document.getElementById( 'ul' ); a.addEventListener( 'webkitAnimationEnd', handleEnd ); ul.addEventListener( 'webkitAnimationEnd', handleEnd ); function handleEnd(e) { console.log(e); } 

You will see two events. The problem was that I used jQuery bind() , and this binds to a specific selector, and not to listening for bubbling events (I think).