Why is this CSS3 animation not working in Firefox and Internet Explorer?

Question

I am trying to create a beginner animation for CSS3. It works in Chrome, Opera and Safari, but does not work in Internet Explorer (11) and Firefox (34.0)

I use the -moz-prefix, but it does not work ... I do not 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

You need to fix a typo : inside keyframes

Mark the 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 2

Your animation requires a few small tweaks:

• remove double :: since this is the wrong syntax
• your animation without a prefix should be placed below any prefix animations.

---

Live demo

---

Tested in Chrome 39, IE 11, and Firefox 33

---

Answer 3

Below I fixed keyframes that do not use an unwanted half-column

 @-moz-keyframes myfirst{ /* firefox */ from{background:black;} to{background: :yellow;} } @-ms-keyframes myfirst{ /* explorer */ from{background:black;} to{background: yellow;} } 

as well as the box class

 -ms-animation: myfirst 5s; /*Explorer*/