Правила ключевого кадра, не работающие над firefox

Question

Анимация не работает на firefox, а работает на Chrome и IE. пожалуйста, используйте правила Keyframe для moz @ -moz-keyframes cf4FadeInOut проблема в том, что все правила ключевых кадров установлены для webkit moz и -o, но все еще не работают.

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

Я уверен, что вы хотели бы чистое решение CSS, но это не возможно прямо сейчас. Многие из браузеров до сих пор не воспользовались новыми возможностями CSS.

Я предлагаю jQuery для вашего решения. В API есть несколько функций, таких как slideIn(), fadeIn(), fadeOut(), .toggle() и т. Д.

Использование этих функций так же просто, как ожидание готовности DOM, а затем применение вашего класса для эффект, который вы ищете. Ниже приведен краткий пример.

<script type="text/javascript"> 
$(function() { 
    $(".myButton").hover(function(){ 
     $(this).fadeOut("slow"); 
    }); 
});//end dom 
</script>