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 中的动画属性。 This post helped me find the answer

删除

.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/