为什么这个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
您需要纠正错字:
在关键帧内部
在这里检查小提琴
#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;}
}
有一些小的调整需要您的动画工作:
::
,因为这是不正确的语法 现场演示
在Chrome 39,IE 11和Firefox 33上进行测试
下面我已更正关键帧不使用不需要的分号
@-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*/
链接地址: http://www.djcxy.com/p/42009.html
上一篇: Why isn't this CSS3 animation working in Firefox and Internet Explorer?