为什么这个CSS3动画不能在Firefox和Internet Explorer中运行？

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

Answer 1

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

1. 删除double ::,因为这是不正确的语法
2. 您的非前缀动画应放置在任何带前缀的动画下方.

现场演示

在Chrome 39,IE 11和Firefox 33中测试过

Answer 2

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

\n\n

在这里检查小提琴

\n\n

#center .box{\n        width:100px;\n        height:100px;\n        margin:0 auto;\n        background-color:black;\n        -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */\n        -webkit-animation-iteration-count: infinite; /*V\xc3\xa9gtelen \xc3\xbajraj\xc3\xa1tsz\xc3\xa1s */\n        -moz-animation: myfirst 5s; /*Mozilla*/\n        -moz-animation-iteration-count: infinite;\n         animation: myfirst 5s; /*Explorer*/\n         animation-iteration-count: infinite;\n}\n\n@-webkit-keyframes myfirst{\n    from{background:black;}\n    to{background:yellow;}\n}\n\n@-moz-keyframes myfirst{\n    from{background:black;}\n    to{background:yellow;}\n}\n\n@keyframes myfirst {\n    from{background:black;}\n    to{background:yellow;}\n}\n

\n