Thursday, 19 September 2013

Keyframe rules not working on firefox

Keyframe rules not working on firefox

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

No comments:

Post a Comment