为什么在Firefox和Internet Explorer中这个CSS3动画不能正常工作？

Question

我正在尝试创建一个初学者的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

- Joci93

---

你的fiddle在第25行和30行有错别字（你插入了两个:）http://jsfiddle.net/webtiki/5a5e48gq/4/ - web-tiki

自Firefox 16版本起，Firefox不需要任何与动画相关的属性添加“-moz-”前缀：http://caniuse.com/#feat=css-animation。我相信现在完全可以安全地不添加这些带有“-moz-”前缀的行（包括`@-moz-keyframes`）。 - Ilya Streltsyn

Answer 1

您的动画需要进行一些小的调整才能正常工作：

1. 删除双重冒号::，因为这不是正确的语法。
2. 非前缀动画应放置在任何前缀动画之下。

---

LIVE DEMO

---

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

---

- jbutler483

Answer 2

您需要在关键帧内纠正拼写错误:

在此处检查示例

#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;}
}

- henser

Answer 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*/

- SekDinesh