0

动画不适用于 Firefox，但适用于 chrome 和 IE。请帮助 为 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;
    }
4

1 回答 1

0

我敢肯定你会想要一个纯 CSS 解决方案，但现在不可能。许多浏览器仍然没有适应新的 CSS 功能。

我会建议 jQuery 为您的解决方案。API 中有几个函数，例如 slideIn()、fadeIn()、fadeOut()、.toggle() 等...

使用这些函数就像等待 DOM 准备好然后应用你的类以获得你想要的效果一样简单。下面是一个简单的示例。

<script type="text/javascript">
$(function() {
    $(".myButton").hover(function(){
        $(this).fadeOut("slow");
    });
});//end dom
</script>
于 2013-09-20T00:54:35.673 回答