我一直有CSS3问题,动画可以在Chrome中使用,但在Firefox中不起作用。
CSS代码:
.mwhaha {
width:100%;
height:100%;
position:fixed;
z-index:98;
background-color:rgba(0, 0, 0, .6);
animation: fade-in 2s;
-moz-animation: fade-in 2s;
-webkit-animation: fade-in 2s;
}
动画代码:
@keyframes fade-in
{
from {
opacity:0;
display:block;
}
from {
opacity:1;
display:block;
}
}
@-moz-keyframes fade-in
{
from {
opacity:0;
display:block;
}
to {
opacity:1;
display:block;
}
}
@-webkit-keyframes fade-in
{
from {
opacity:0;
display:block;
}
to {
opacity:1;
display:block;
}
}
就像我说的,代码可以在Chrome中运行,但在Firefox中不起作用。 我一直在尝试其他几种方法来使它像:
@-moz-keyframes fade-in
{
from {
background-color:rgba(0, 0, 0, .0);
display:block;
}
to {
background-color:rgba(0, 0, 0, .6);
display:block;
}
}
但仍然没有结果。
答案 0 :(得分:0)
我把它放在一个小提琴中并纠正了那些不会引起问题的小错误。 Firefox 35.0 / Mac OSX Yosemite中的小提琴效果很好。
您在哪个操作系统上使用哪个FF版本?
@keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
.mwhaha {
width:100%;
height:100%;
position:fixed;
z-index:98;
background-color:rgba(0, 0, 0, .6);
animation: fade-in 2s;
-moz-animation: fade-in 2s;
-webkit-animation: fade-in 2s;
}
<div class="mwhaha"></div>