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

Question

我有这个小动画，但它在 Firefox 上运行不正常，在 Explorer 上根本无法运行。

想法是，当您将鼠标悬停在灰色 DIV 上时，红色 DIV 将会动画。

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

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

http://jsfiddle.net/soporo123/8PDnA/5/

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

这里是你更新的 fiddle : http://jsfiddle.net/8PDnA/10/

我没有检查 -o-transform 是否存在，只是在 w3c 上检查了一下。