0

I have a key frame animation that I animate on hover for a navigation menu. When I hover over, the animation works just fine but I want it to finish the animation if I move the mouse off. This function is working correctly in Chrome, but not Firefox and I can't figure out why.

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

One thing I have noticed, on FF the animation resets even if you keep the mouse on top.

Simply removing 'mozAnimationEnd' does not fix the issue like it does in a different, but similar, question on Stackoverflow.

HTML:

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

Script:

$('.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;
}
GregT
  • 508
  • 3
  • 15
  • possible duplicate of [AnimationEnd not working](http://stackoverflow.com/questions/16553344/animationend-not-working) – CBroe Apr 30 '15 at 23:04
  • the 'mozAnimationEnd' isn't tripping the animation up. I've removed it and still happens. http://jsfiddle.net/u95Lumm3/2/ – GregT Apr 30 '15 at 23:38
  • Works in FF 38 (beta). Open console and double check you don't get the "removed" message: http://jsfiddle.net/epistemex/u95Lumm3/3/ –  Apr 30 '15 at 23:47
  • 1
    Looks like the `:hover` state for the button might be interfering with it. – CBroe Apr 30 '15 at 23:50
  • Actually, while that did help, I found the real issue and posted an answer. Transitions overwrite the animation properties in firefox so that was causing the strange animation reset and the 'animationend' property from not working. – GregT May 01 '15 at 00:13

1 Answers1

0

The transition property overwrites the animation property in Firefox. This post helped me find the answer

Removing

.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;
}

Becomes 

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

}

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

Community
  • 1
  • 1
GregT
  • 508
  • 3
  • 15