Running css animation in sequence and WebkitAnimationEnded

Question

I'm trying to animate several SVG line elements in sequence, i followed @Gaby approach here A non-nested animation sequence in jQuery? and used jQuery queue. However my WebkitAnimationEnd is never fired. Maybe it does not work on SVG Elements, but thats not mentioned in the docs:

    var q = $({});

    function pushQueue(theQueue, selector, animationprops) {
        theQueue.queue(function(next) {



            $('#' + selector).one("webkitAnimationEnd oanimationend msAnimationEnd animationend",  function(){
                console.log('Animation ended, calling next..'); 
                next(); 
            } );


            s.select('#' + selector)
                .clone()
                .addClass('path')
                .attr({
                    stroke: "#FFE840",
                    filter: 'none'
                });




        });
    }

I added a CodePen below, you can click on the valve just under the p103 pipe to see the effect.

http://codepen.io/yehiasalam/pen/RPbgPz

Answer 1

Here's what you need to change. The reason things weren't working before is that you were first cloneing the object and then adding the path class. Here's a CodePen.

s.select('#' + selector)
     .addClass('path')
     .clone()
     .attr({
        stroke: "#FFE840",
        filter: 'none'
      });