我正在尝试创建一个初学者的
CSS3动画.它适用于Chrome,Opera和Safari,但不适用于Internet Explorer(11)和Firefox(34.0)
我正在使用-moz-前缀,但它不起作用……我不知道为什么.
@H_301_4@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;} }解决方法
你需要纠正错字：在关键帧内
@H_301_4@#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;}
}
