Question

So according to MDN (it makes sense) the AnimationEvent has the bubble argument but how can one set it to true? Considering the event is fired from a CSS animation.

Answer 1

Ok, it turns out that CSS does bubble events, 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’ll see two events fired. The problem I had was that I was using jQuery’s bind() and this binds to a specific selector rather than listening to bubbled events (I think).