CSS3关键帧动画在Chrome（而非Firefox）中运行

Question

我有一个关键帧动画，我将鼠标悬停在该动画上以导航菜单。 当我将鼠标悬停时，动画效果很好，但是如果我将鼠标移开，我希望它完成动画。 此功能在Chrome中正常运行，但在Firefox中无法正常运行，我不知道为什么。

jsFiddle： http : //jsfiddle.net/u95Lumm3/1/

我注意到的一件事是，即使您将鼠标放在顶部，在FF上动画也会重置。

仅仅删除'mozAnimationEnd'并不能解决问题，就像在Stackoverflow上的一个不同但相似的问题中一样。

HTML：

<div style="width: 100px; height: 100px; background: green;">
    <div class="nav-bnt">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

脚本：

$('.nav-bnt').bind('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $('.nav-bnt').removeClass("animation");
});

$('.nav-bnt').hover(function(){
  $('.nav-bnt').addClass("animation");        
})

CSS：

.nav-bnt div, .nav-bnt div:nth-of-type(3) {
    top: -15px; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    -moz-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -o-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -ms-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    transform: translate3d(-1px, 0px, 0px) rotate(0deg);
}

.nav-bnt div:nth-of-type(2) {
    top: 0;
    -moz-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -o-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    -ms-transform: translate3d(-1px, 0px, 0px) rotate(0deg);
    transform: translate3d(-1px, 0px, 0px) rotate(0deg);
}

.nav-bnt div:nth-of-type(3) {
    top: 0;
    bottom: -16px;
}


.animation div:nth-of-type(2) {
    -webkit-animation: navanimateleft .5s;
    -moz-animation: navanimateleft .5s;
    -o-animation: navanimateleft .5s;
    -ms-animation: navanimateleft .5s;  
    animation: navanimateleft .5s;  
}

.animation div:nth-of-type(1), .animation div:nth-of-type(3) {

    -webkit-animation: navanimateright .5s;
    -moz-animation: navanimateright .5s;
    -ms-animation: navanimateright .5s;
    -o-animation: navanimateright .5s;
    animation: navanimateright .5s;

}

@-webkit-keyframes navanimateleft {
    0%      {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {-webkit-transform: translate3d(-10px, 0px, 0px) rotate(0deg);}
    60%     {-webkit-transform: translate3d(-10px, 0px, 0px) rotate(180deg);}
    100%    {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}

@keyframes navanimateleft {
    0%      {transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {transform: translate3d(-10px, 0px, 0px) rotate(0deg);}
    60%     {transform: translate3d(-10px, 0px, 0px) rotate(180deg);}
    100%    {transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


@-webkit-keyframes navanimateright {
    0%      {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {-webkit-transform: translate3d(10px, 0px, 0px) rotate(0deg);}
    60%     {-webkit-transform: translate3d(10px, 0px, 0px) rotate(180deg);}
    100%    {-webkit-transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


@keyframes navanimateright {
    0%      {transform: translate3d(-1px, 0px, 0px) rotate(0deg);}
    30%     {transform: translate3d(10px, 0px, 0px) rotate(0deg);}
    60%     {transform: translate3d(10px, 0px, 0px) rotate(180deg);}
    100%    {transform: translate3d(-1px, 0px, 0px) rotate(180deg);}  
}


.nav-bnt {
    position: relative;
    width: 50px;
    height: 50px;
    top: 25px;
    cursor: pointer;
    background: rgba(255,255,255, 1);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    z-index: 999;
    transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -webkit-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
} 

.nav-bnt:hover {
    -moz-transform: scale(1.10);
    -webkit-transform: scale(1.10);
    -o-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
}


.nav-bnt div {
    backface-visibility: hidden;
    background-color: #993399;
    height: 3px;
    width: 15px;
    position: absolute;

    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

Answer 1

Transition属性将覆盖Firefox中的animation属性。 这篇文章帮助我找到了答案

拆下

.nav-bnt div {
    backface-visibility: hidden;
    background-color: #993399;
    height: 3px;
    width: 15px;
    position: absolute;

    transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -webkit-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}

成为

.nav-bnt div {
    backface-visibility: hidden;
    background-color: #993399;
    height: 3px;
    width: 15px;
    position: absolute;

}

JsFiddle： http : //jsfiddle.net/u95Lumm3/5/