Firefox中的CSS动画不工作 [英] CSS animation in Firefox not work
本文介绍了Firefox中的CSS动画不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您好,我为我的盒子创建动画,所有工作在chrome。但在firefox不工作。
我尝试使用-moz-但是没有什么。
Hello i create animation for my box and all work in chrome. But in firefox dont work. I try to use -moz- but again nothing.
动画的CSS代码是:
@-webkit-keyframes pulse {
from {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
50% {
-webkit-transform: scale(1.2);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
opacity: 0.75;
}
}
div.pulse { opacity: 0.75; }
div.pulse:hover {
-moz-animation-name: pulse;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: 1;
-webkit-animation-name: pulse;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
}
任何人都能知道我做错了什么?不在莫希拉工作?
Anyone can tell what i do wrong? Whay dont work in mozila?
推荐答案
您需要定义动画的FF版本,并转换以及 webkit版本
You need to define the FF version of the animation and transform as well as the webkit version
@-moz-keyframes pulse { /* older versions of FF */
from {
-moz-transform: scale(1.0);
opacity: 0.75;
}
50% {
-moz-transform: scale(1.2);
opacity: 1.0;
}
to {
-moz-transform: scale(1.0);
opacity: 0.75;
}
}
@keyframes pulse {
from {
transform: scale(1.0);
opacity: 0.75;
}
50% {
transform: scale(1.2);
opacity: 1.0;
}
to {
transform: scale(1.0);
opacity: 0.75;
}
}
这篇关于Firefox中的CSS动画不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文