我有一个关键帧动画,我在悬停时为导航菜单制作动画。当我悬停时,动画效果很好,但如果我将鼠标移开,我希望它能完成动画。此功能在 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;
}
最佳答案
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/
关于javascript - CSS3 关键帧动画在 chrome 中工作,而不是 firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29979180/