Question

我一直有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;
    }
}

但仍然没有结果。

Answer 1

我把它放在一个小提琴中并纠正了那些不会引起问题的小错误。 Firefox 35.0 / Mac OSX Yosemite中的小提琴效果很好。

http://jsfiddle.net/o3qqeL8k/

您在哪个操作系统上使用哪个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>

动画无法正常工作CSS3

1 个答案: