Правила ключевых кадров не работают в Firefox

Question

Правила ключевых кадров не работают в Firefox

0

Анимации не работают на firefox, а работают на хроме и 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;
    }

chris 20 сен. 2013, в 00:52

Источник

Теги:

html

css

google-chrome

firefox

1 ответ

Ещё вопросы

googabeast · Accepted Answer · 2013-09-19T21-55-00.000Z

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

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

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

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

Спасибо, я думаю, мне нужно ввести JQuery в мой код.
К сожалению, насколько я люблю CSS, у него так много ограничений при использовании веб-наборов. jQuery уменьшает количество кварков в браузерах, может быть, для совместимости это может быть немного медленнее. Я должен сказать, что jQuery - лучший.