CSS转换在Firefox上无法正常工作 [英] CSS Transform not working properly on Firefox

问题描述

我有这个小动画，但是它在Firefox上无法正常运行，并且在Explorer上根本无法正常工作。

I have this little animation but it does not behave properly on Firefox and it does not work at all on Explorer.

这个想法是，当您将鼠标悬停在灰色DIV上时，红色DIV将进行动画处理。

The idea is that when you hover on the gray DIV, the red DIV will animate.

在Firefox上当您重新加载页面并且光标悬停在灰色区域时，它仅运行一次。如果您想使其恢复工作，则不会设置动画。

On Firefox it runs only once when you reload the page and the cursor is hover on the gray area. If you want to make it work again it'll not animate. On chrome it works fine.

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

Oh, before I forget, the animation basics is from 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;
}

谢谢！

推荐答案

没有针对Moz，Opera的特定关键帧。
仅使用@ -webkit-keyframes，动画名称的计数相同。
还要在悬停中做所有事情，还要动画名称。

There are no specific keyframes for moz, opera. only use @-webkit-keyframes, same counts for animation-name. Also do all in your hover, also the animation name.

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上进行了检查。

I didn't check if -o-transform exists, but just check it at w3c.

这篇关于CSS转换在Firefox上无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！