animationend只在firefox中触发一次

Question

我想创建带有css动画的简单滑块，并使用代码http://tympanus.net/Development/ImageTransitions/index6.html进行播放。它似乎适用于我测试的所有桌面浏览器，除了firefox。 在firefox中，animationend事件由于某种原因仅被触发一次。你有什么想法为什么animationend事件只触发一次firefox，但在其他浏览器中工作正常吗？

CSS：

.te-example4.te-show .te-front{
    animation: example4Front 0.8s ease-in-out forwards;
    -ms-animation: example4Front 0.8s ease-in-out forwards;
    -moz-animation: example4Front 0.8s ease-in-out forwards;
    -o-animation: example4Front 0.8s ease-in-out forwards;
    -webkit-animation: example4Front 0.8s ease-in-out forwards;
}

@keyframes example4Front{
    0% { transform: translateX(0); z-index: 3;}
    50% { transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
    51% { z-index: 1;}
    100% { transform: rotateZ(0deg) translateX(0px); z-index: 1;}
}


@-moz-keyframes example4Front{
    0% { -moz-transform: translateX(0); z-index: 3;}
    50% { -moz-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
    51% { z-index: 1;}
    100% { -moz-transform: rotateZ(0deg) translateX(0px); z-index: 1;}
}

@-ms-keyframes example4Front{
    0% { -ms-transform: translateX(0); z-index: 3;}
    50% { -ms-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
    51% { z-index: 1;}
    100% { -ms-transform: rotateZ(0deg) translateX(0px); z-index: 1;}
}



@-o-keyframes example4Front{
    0% { -o-transform: translateX(0); z-index: 3;}
    50% { -o-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
    51% { z-index: 1;}
    100% { -o-transform: rotateZ(0deg) translateX(0px); z-index: 1;}
}


@-webkit-keyframes example4Front{
    0% { -webkit-transform: translateX(0); z-index: 3;}
    50% { -webkit-transform: rotateZ(-5deg) translateX(-339px); z-index: 3;}
    51% { z-index: 1;}
    100% { -webkit-transform: rotateZ(0deg) translateX(0px); z-index: 1;}
}

使用Javascript：

$(function() {

    var TransitionEffects   = (function() {

        var $teWrapper      = $('#te-wrapper'),
            $teCover        = $teWrapper.find('div.te-cover'),
            $teImages       = $teWrapper.find('div.te-images > img'),
            imagesCount     = $teImages.length,
            currentImg      = 0,
            $navNext        = $('#te-next'),
            $type           = $('#type'),
            type            = $type.val(),
            $teTransition   = $teWrapper.find('.te-transition'),
            animated        = false,
            // check for support
            hasPerspective  = Modernizr.csstransforms3d,
            init            = function() {

                $teTransition.addClass( type );
                $navNext.on( 'click', function( event ) {

                    if( hasPerspective && animated ) {
                        console.log('antimated: ' + animated);
                        console.log('hasPerspective: ' + hasPerspective);
                        return false;
                    }

                    animated = true;    
                    showNext();
                    return false;

                });



                if( hasPerspective ) {


                    $teWrapper.on({
                        'animationstart mozanimationstart oAnimationStart webkitAnimationStart' : function( event ) {
                            console.log('animationstart');

                        },
                        'animationend mozAnimationEnd oAnimationEnd webkitAnimationEnd' : function( event ) {

                            $teCover.removeClass('te-hide');
                            $teTransition.removeClass('te-show');
                            animated = false;
                            console.log('animationend');
                            console.log(event.animationName);
                            console.log(event.originalEvent.animationName);
                        }
                    });
                }                                   
            },
            showNext        = function() {

                if( hasPerspective ) {

                    $teTransition.addClass('te-show');
                    $teCover.addClass('te-hide');                   
                }

                updateImages();

            },
            updateImages    = function() {

                var $back   = $teTransition.find('div.te-back'),
                    $front  = $teTransition.find('div.te-front');

                ( currentImg === imagesCount - 1 ) ? 
                    ( last_img = imagesCount - 1, currentImg = 0 ) : 
                    ( last_img = currentImg, ++currentImg );

                var $last_img   = $teImages.eq( last_img ),
                    $currentImg = $teImages.eq( currentImg );

                $front.empty().append('<img src="' + $last_img.attr('src') + '">');
                $back.empty().append('<img src="' + $currentImg.attr('src') + '">');

                $teCover.find('img').attr( 'src', $currentImg.attr('src') );

            };

        return { init : init };

    })();

    TransitionEffects.init();

});

单击下一个按钮时，将使用动画效果更改图像。

为什么它在firefox中不起作用？它是firefox bug还是什么？