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

Posted 2023-03-06

【中文标题】CSS 转换在 Firefox 上无法正常工作

【英文标题】：CSS Transform not working properly on Firefox

【发布时间】：2014-02-05 12:55:03

【问题描述】：

我有这个小动画，但它在 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;

提前致谢！！

【参考方案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 动画...祝您有美好的一天，再次感谢您的宝贵时间！ :D