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

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

解决方法

你需要纠正错字：在关键帧内

检查fiddle here

#center .Box{
        width:100px;
        height:100px;
        margin:0 auto;
        background-color:black;
        -webkit-animation: myfirst 5s; /* Chrome,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;}
}

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

解决方法

猜你在找的CSS相关文章