Keyframe rules not working on firefox - html

Question

Animations not working on firefox but working on chrome and IE. please help Keyframe rules are set for moz #-moz-keyframes cf4FadeInOut the problem is that all keyframes rules are set for webkit moz and -o- but still not working.
http://jsfiddle.net/eVULR/1/
/* full image slider */
#-webkit-keyframes cf4FadeInOut {
0% {opacity:1;}
19% {opacity:1;}
25% {opacity:0;}
94% {opacity:0;}
100% {opacity:1;}
}
#-moz-keyframes cf4FadeInOut {
0% {opacity:1;}
19% {opacity:1;}
25% {opacity:0;}
94% {opacity:0;}
100% {opacity:1;}
}
#-o-keyframes cf4FadeInOut {
0% {opacity:1;}
19% {opacity:1;}
25% {opacity:0;}
94% {opacity:0;}
100% {opacity:1;}
}
#keyframes cf4FadeInOut {
0% {opacity:1;}
19% {opacity:1;}
25% {opacity:0;}
94% {opacity:0;}
100% {opacity:1;}
}
#cf4a
{
overflow:hidden;
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-color:black;
}
#cf4a img
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 20s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 20s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 20s;
}
#page-wrap, #cf4a img:nth-of-type(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
z-index:4;
}
#page-wrap{
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 20s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 20s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 20s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
z-index:5;
}
#page-wrap1,#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
z-index:3;
}
#page-wrap1{
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 20s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 20s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 20s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
z-index:3;
}
#page-wrap2,#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
z-index:2;
}
#page-wrap2{
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 20s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 20s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 20s;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
z-index:2;
}
#page-wrap,#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
z-index:1;
}

Answer 1

I'm sure you would like a pure CSS solution, but that is not possible right now. Many of the browsers still have not gotten up to the new CSS capabilities.
I would suggest jQuery for your solution. There are several functions within the API such as slideIn(), fadeIn(), fadeOut(), .toggle() etc...
Using these functions is as simple as waiting for DOM ready and then applying your class for the effect your looking for. A quick example is below.
<script type="text/javascript">
$(function() {
$(".myButton").hover(function(){
$(this).fadeOut("slow");
});
});//end dom
</script>