为什么这个 CSS3 动画在 Firefox 和 Internet Explorer 中不起作用？答案

【问题标题】：Why isn't this CSS3 animation working in Firefox and Internet Explorer?为什么这个 CSS3 动画在 Firefox 和 Internet Explorer 中不起作用？
【发布时间】：2015-02-14 15:46:35
【问题描述】：

我正在尝试创建初学者的 CSS3 动画。它适用于 Chrome、Opera 和 Safari，但不适用于 Internet Explorer (11) 和 Firefox (34.0)

我正在使用 -moz- 前缀，但它不起作用……我不知道为什么。

    body{
    width:100%;
}
#center{
    width:900px;
    margin:0 auto;

    height:800px;
    display:block;
}

#center .box{
        width:100px;
        height:100px;
        background-color:black;
        margin:0 auto;
        -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
        animation: myfirst 5s; /*Explorer*/
        -moz-animation: myfirst 5s; /*Mozilla*/
        -webkit-animation-iteration-count: infinite; 
        -moz-animation-iteration-count: infinite;
         animation-iteration-count: infinite;
}

@-webkit-keyframes myfirst{
    from{backgrond:black;}
    to{background:yellow;}
}
@-moz-keyframes myfirst{
    from{background:black;}
    to{background: :yellow;}
}

@keyframes myfirst {
    from{background:black;}
    to{background: :yellow;}
}

JSFiddle

【问题讨论】：

您的小提琴第 25 行和第 30 行有错字（您插入了两次 :）jsfiddle.net/webtiki/5a5e48gq/4
Firefox 从版本 16 开始不再需要 -moz-prefix 用于任何与动画相关的属性：caniuse.com/#feat=css-animation。我相信现在不添加这些-moz-prefixed 行（包括@-moz-keyframes）是完全安全的。

标签： css animation

【解决方案1】：

您的动画需要进行一些小调整：

删除双 ::，因为这不是正确的语法
您的无前缀动画应放在任何有前缀的动画下方。

LIVE DEMO

在 Chrome 39、IE 11 和 Firefox 33 中测试

【讨论】：

【解决方案2】：

您需要更正关键帧内的拼写错误:

查看fiddle here

#center .box{
        width:100px;
        height:100px;
        margin:0 auto;
        background-color:black;
        -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
        -webkit-animation-iteration-count: infinite; /*Végtelen újrajátszás */
        -moz-animation: myfirst 5s; /*Mozilla*/
        -moz-animation-iteration-count: infinite;
         animation: myfirst 5s; /*Explorer*/
         animation-iteration-count: infinite;
}

@-webkit-keyframes myfirst{
    from{background:black;}
    to{background:yellow;}
}

@-moz-keyframes myfirst{
    from{background:black;}
    to{background:yellow;}
}

@keyframes myfirst {
    from{background:black;}
    to{background:yellow;}
}

【讨论】：

【解决方案3】：

下面我已经更正了关键帧不要使用不需要的分号

@-moz-keyframes myfirst{ /* firefox */
    from{background:black;}
    to{background: :yellow;}
}
@-ms-keyframes myfirst{ /* explorer */
    from{background:black;}
    to{background: yellow;}
}

还有和盒子类

-ms-animation: myfirst 5s; /*Explorer*/

【讨论】：