Image transition with keyframes - css

Question

Hey guys I am currently building an image show (small) with css3 keyframes, and it is working, but only on firefox in some way, and I cant seem to tackle the problem :( It should work in the latest versions of chrome firefox and safari, but its currently only working in firefox.
Anyone can that can help?
Here's the css that should work in al above browsers.
#keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
.case-image {
position:relative;
height:auto;
width:32%;
}
.case-image img {
position:absolute;
width: 100%;
height: auto;
left:0;
border: 3px solid #f8d206;
-moz-border-radius: 15px;
border-radius: 15px;
margin-left: -3px;
margin-right: -3px;
}
.case-image img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
.case-image img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
.case-image img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.case-image img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.case-image img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}

Answer 1

You need to include the vendor prefixes for the keyframes. See here for an example: http://jsfiddle.net/tjfogarty/Gzxkq/
#keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
#-webkit-keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
#-moz-keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
Etc...
You can also use something like this: http://leaverou.github.com/prefixfree/ to take care of it for you.