Divimus

Hey, I'm trying to build an image slider in css3. This works fine in the webkit based browsers (safari and chrome). But it doesn't in IE and FF. According to w3schools, the animation and keyframe properties are supported in IE 10 and FF 16. But when I open my website in IE 10 or FF 22, it doesn't work. The exact same script with the webkit prefixes works fine in Safari or Chrome. Does anyone know what's wrong with my script? #slider { width:669px; height:385px; animation:slider 20s; animation-iteration-count:infinite; -webkit-animation:slider 20s; /* Safari and Chrome */ -webkit-animation-iteration-count:infinite; -moz-animation:slider 20s; /* Firefox */ -moz-animation-iteration-count:infinite; -o-animation:slider 20s; /* Opera */ -o-animation-iteration-count:infinite; -ms-animation:slider 20s; /* IE */ -ms-animation-iteration-count:infinite; float: right; margin-right: 50px; } @keyframes slider { 0% {background-image: url("slider2.png");} 5% {background-image: url("slider1.png");} 25% {background-image: url("slider1.png");} 30% {background-image: url("slider2.png");} 50% {background-image: url("slider2.png");} 55% {background-image: url("slider1.png");} 75% {background-image: url("slider1.png");} 80% {background-image: url("slider2.png");} 100% {background-image: url("slider2.png");} } @-webkit-keyframes slider /* Safari and Chrome */ { 0% {background-image: url("slider2.png");} 5% {background-image: url("slider1.png");} 25% {background-image: url("slider1.png");} 30% {background-image: url("slider2.png");} 50% {background-image: url("slider2.png");} 55% {background-image: url("slider1.png");} 75% {background-image: url("slider1.png");} 80% {background-image: url("slider2.png");} 100% {background-image: url("slider2.png");} } @-moz-keyframes slider /* Firefox */ { 0% {background-image: url("slider2.png");} 5% {background-image: url("slider1.png");} 25% {background-image: url("slider1.png");} 30% {background-image: url("slider2.png");} 50% {background-image: url("slider2.png");} 55% {background-image: url("slider1.png");} 75% {background-image: url("slider1.png");} 80% {background-image: url("slider2.png");} 100% {background-image: url("slider2.png");} } @-o-keyframes slider /* Opera */ { 0% {background-image: url("slider2.png");} 5% {background-image: url("slider1.png");} 25% {background-image: url("slider1.png");} 30% {background-image: url("slider2.png");} 50% {background-image: url("slider2.png");} 55% {background-image: url("slider1.png");} 75% {background-image: url("slider1.png");} 80% {background-image: url("slider2.png");} 100% {background-image: url("slider2.png");} } @-ms-keyframes slider /* IE */ { 0% {background-image: url("slider2.png");} 5% {background-image: url("slider1.png");} 25% {background-image: url("slider1.png");} 30% {background-image: url("slider2.png");} 50% {background-image: url("slider2.png");} 55% {background-image: url("slider1.png");} 75% {background-image: url("slider1.png");} 80% {background-image: url("slider2.png");} 100% {background-image: url("slider2.png");} }