Пузырьковое событие анимации CSS

Question

Итак, согласно MDN (это имеет смысл), AnimationEvent имеет аргумент bubble, но как можно установить его в значение true?Учитывая, что событие запускается из CSS-анимации.

Answer 1

Хорошо, оказывается, что CSS создает пузырьковые события, например:

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);
}

Вы увидите два события сработали.Проблема, с которой я столкнулся, заключалась в том, что я использовал jQuery bind(), и это связывалось с конкретным селектором, а не с прослушиванием всплывающих событий (я думаю).