动画无法正常工作 CSS3答案

【问题标题】：Animation not working correctly CSS3动画无法正常工作 CSS3
【发布时间】：2012-03-03 17:44:15
【问题描述】：

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

但还是没有结果。

【问题讨论】：

在关键帧中重复使用 from ？
糟糕，将修复它并尝试它是否有效。我的坏:) /编辑：仍然无法正常工作
我将您的代码复制到网页中，动画效果很好。您的问题一定出在其他地方。
我不认为display 和类似的非动画值受支持；尝试只使用background-color

标签： firefox google-chrome animation css

【解决方案1】：

我已经把它放在了一个小提琴中，并纠正了 imo 没有引起问题的小错误。小提琴在 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;
}

&lt;div class="mwhaha"&gt;&lt;/div&gt;

【讨论】：