Why isn't this CSS3 animation working in Firefox and Internet Explorer?
I'm trying to create a beginner's CSS3 animation. It's working in Chrome, Opera and Safari but doesn't in Internet Explorer (11) and Firefox (34.0)
I'm using the -moz- prefix, but it isn't working… I don't know why.
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
You need to correct the typo : inside the keyframes
Check 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;}
}
There are a few small tweaks required for your animation to work:
:: , as this isn't correct syntax LIVE DEMO
tested in Chrome 39, IE 11 and Firefox 33
Below i have corrected the keyframes don't use unwanted semi-colon
@-moz-keyframes myfirst{ /* firefox */
from{background:black;}
to{background: :yellow;}
}
@-ms-keyframes myfirst{ /* explorer */
from{background:black;}
to{background: yellow;}
}
and also and the box class
-ms-animation: myfirst 5s; /*Explorer*/