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

时间:2014-12-16 10:47:00

标签: css css3 animation

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

3 个答案:

答案 0 :(得分:5)

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

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

  3. LIVE DEMO


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


答案 1 :(得分:3)

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

检查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;}
}

答案 2 :(得分:1)

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

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