css - Why isn't this CSS3 animation working in Firefox and Internet Explorer? -

i'm trying create beginner's css3 animation. it's working in chrome, opera , safari doesn't in internet explorer (11) , firefox (34.0)

i'm using -moz- prefix, isn't working… 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 correct typo : inside 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;} }