Question

动画不能在Firefox上工作，但在Chrome和IE上工作。请帮助为moz @ -moz-keyframes设置关键帧规则cf4FadeInOut问题是所有关键帧规则都是为webkit moz和-o-设置的，但仍然无效。

/* 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>

关键帧规则不适用于Firefox

1 个答案: