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

Question

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

Answer 1

There are a few small tweaks required for your animation to work:

1. remove the double ::, as this isn't correct syntax
2. your non-prefixed animation should be placed below any prefixed animations.

---

LIVE DEMO

---

tested in Chrome 39, IE 11 and Firefox 33

---

Answer 2

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;}
}

Answer 3

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*/