javascript - 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 属性。 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/