Question

我有这个小动画，但它在Firefox上表现不正常，在Explorer上根本不起作用。

这个想法是，当你将鼠标悬停在灰色DIV上时，红色DIV将会生成动画。

在Firefox上，当您重新加载页面时，它只运行一次，并且光标悬停在灰色区域上。如果你想让它再次运作它就不会有动画效果。在Chrome上它工作正常。

哦，在我忘记之前，动画基础是来自animate.css

HTML：

<div id="box">
    <div id="button" class="bounceIn"></div>
</div>

CSS：

#box {
    width:400px;
    height: 400px;
    background-color:#999; 
}
#button{
    width:40px;
    height:40px;
    background-color:#F00;
}

#box:hover #button{
    -webkit-animation-duration:1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

@-webkit-keyframes bounceIn {
    0% {-webkit-transform: scale(.3);}  
    50% {-webkit-transform: scale(1.05);}
    70% {-webkit-transform: scale(.9);}
    100% {-webkit-transform: scale(1);}
}

@-moz-keyframes bounceIn {
    0% {-moz-transform: scale(.3);}
    50% {-moz-transform: scale(1.05);}
    70% {-moz-transform: scale(.9);}
    100% {-moz-transform: scale(1);}
}

@-o-keyframes bounceIn {
    0% {-o-transform: scale(.3);}
    50% {-o-transform: scale(1.05);}
    70% {-o-transform: scale(.9);}  
    100% {-o-transform: scale(1);}
}

@keyframes bounceIn {
    0% {transform: scale(.3);}
    50% {transform: scale(1.05);}
    70% {transform: scale(.9);}
    100% {transform: scale(1);}
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}

提前致谢!!

Answer 1

moz，opera没有特定的关键帧。只使用@ -webkit-keyframes，动画名称的计数相同。也可以在悬停中完成所有操作，也可以使用动画名称。

CSS：

#box {
    width:400px;
    height: 400px;
    background-color:#999; 
}

#button{
    width:40px;
    height:40px;
    background-color:#F00;
}

#box:hover #button{
    -webkit-animation-duration:1s;
    animation-duration:1s;
     -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceIn {
    0% {-webkit-transform: scale(.3);}  
    50% {-webkit-transform: scale(1.05);}
    70% {-webkit-transform: scale(.9);}
    100% {-webkit-transform: scale(1);}
}

@keyframes bounceIn {
    0% {-moz-transform: scale(.3); -o-transform: scale(.3); transform: scale(.3);}
    50% {-moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05);}
    70% {-moz-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9);}
    100% {-moz-transform: scale(1); -o-transform: scale(1); transform: scale(1);}
}

这里你的更新小提琴： http://jsfiddle.net/8PDnA/10/

我没有检查-o-transform是否存在，只是在w3c检查它。

CSS转换在Firefox上无法正常工作

1 个答案: