Question

所以我试图淡化3张图像，一张照片慢慢放在一起，这样你就可以看到每张图像几秒钟，然后下一张图像在顶部消失。我正在关注this tutorial here.但是由于某种原因，我的图像似乎过快地褪色，我无法很好地控制时间。

Here is my preview page. 您可能会看到一只鸟，然后是西红柿然后是一条船，但现在它们只会在彼此的顶部逐渐消失并最终落在船上。

我正在关注演示1和演示3，我的动画关闭的任何想法？提前致谢！：）

我的jsfiddle： http://jsfiddle.net/leongaban/TPjWG/

CODE：

<style>

@-webkit-keyframes cf4FadeInOut {
 0% {
   opacity:0;
 }
 25% {
   opacity:1;
 }  
 50% {
   opacity:1;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes cf4FadeInOut {
 0% {
   opacity:0;
 }
 25% {
   opacity:1;
 }  
 50% {
   opacity:1;
 }
 100% {
   opacity:1;
 }
}

@-ms-keyframes cf4FadeInOut {
 0% {
   opacity:0;
 }
 25% {
   opacity:1;
 }  
 50% {
   opacity:1;
 }
 100% {
   opacity:1;
 }
}       

#cf4a {
    position:relative;
    height:250px;
    width:300px;
    margin:0 auto;
}
#cf4a img {
    position:absolute;
    left:0;
}

#cf4a img {
    -webkit-animation-name: cf4FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 30s;

    -moz-animation-name: cf4FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 30s;

    -ms-animation-name: cf4FadeInOut;
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-iteration-count: 1;
    -ms-animation-duration: 30s;                
}
#cf4a img:nth-of-type(1) {
    -webkit-animation-delay: 0;     
    -moz-animation-delay: 0;    
    -ms-animation-delay: 0; 
}
#cf4a img:nth-of-type(2) {
    -webkit-animation-delay: 30s;       
    -moz-animation-delay: 30s;  
    -ms-animation-delay: 30s;
}
#cf4a img:nth-of-type(3) {
    -webkit-animation-delay: 60s;       
    -moz-animation-delay: 60s;      
    -ms-animation-delay: 60s;       
}

</style>

<div id="cf4a">

    <a href="http://http://stackoverflow.com/" target="_blank"><img src="img/bird1.jpg" /></a>
    <a href="http://http://stackoverflow.com/" target="_blank"><img src="img/tomato2.jpg" /></a>
    <a href="http://http://stackoverflow.com/" target="_blank"><img src="img/boat3.jpg" /></a>

</div>

Answer 1

我相信你的部分问题是动画期间的z-index排序，并且动画的时间安排没有重叠（与z-index相关）。

使用仅淡出技术（因为您似乎正在对图像进行一次性动画）。我在Firefox和Chrome中测试了a working demo的解决方案（IE9不支持动画，因此您必须在初次使用-ms-扩展名时准备好IE10。由于我只淡出一次，因此最终a标签不需要动画，因为它最后显示并保留（并且是非CSS3动画浏览器的默认设置）。

该演示使用以下CSS代码（与原始代码相同的HTML）：

<强> CSS

@-webkit-keyframes cf4FadeOut1 {
 0% {
   opacity:1;
   z-index: 100;
 }  
 80% { /* 6 sec trans on 30s animation */
   opacity:1;
   z-index: 100;
 }
 100% {
   opacity:0;
   z-index: 100;
 }
}

@-moz-keyframes cf4FadeOut1 {
 0% {
   opacity:1;
   z-index: 100;
 }  
 80% { /* 6 sec trans on 30s animation */
   opacity:1;
   z-index: 100;
 }
 100% {
   opacity:0;
   z-index: 100;
 }
}

@-ms-keyframes cf4FadeOut1 {
 0% {
   opacity:1;
   z-index: 100;
 }  
 80% { /* 6 sec trans on 30s animation */
   opacity:1;
   z-index: 100;
 }
 100% {
   opacity:0;
   z-index: 100;
 }
}

@-webkit-keyframes cf4FadeOut2 {
 0% {
   opacity:1;
   z-index: 2;
 }   
 90% { /* 6 sec trans on 60s animation */
   opacity:1;
   z-index: 2;
 }
 100% {
   opacity:0;
   z-index: 2;
 }
}

@-moz-keyframes cf4FadeOut2 {
 0% {
   opacity:1;
   z-index: 2;
 }   
 90% { /* 6 sec trans on 60s animation */
   opacity:1;
   z-index: 2;
 }
 100% {
   opacity:0;
   z-index: 2;
 }
}

@-ms-keyframes cf4FadeOut2 {
 0% {
   opacity:1;
   z-index: 2;
 }   
 90% { /* 6 sec trans on 60s animation */
   opacity:1;
   z-index: 2;
 }
 100% {
   opacity:0;
   z-index: 2;
 }
}

#cf4a {
    position:relative;
    height:250px;
    width:300px;
    margin:0 auto;
}
#cf4a a {
    position:absolute;
    left:0;
    z-index: 0;
}

#cf4a a {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0;

    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0;

    -ms-animation-timing-function: ease-in-out;
    -ms-animation-iteration-count: 1;
    -ms-animation-delay: 0;   
}

#cf4a a:nth-of-type(1) {
     -webkit-animation-name: cf4FadeOut1;
     -moz-animation-name: cf4FadeOut1;
     -ms-animation-name: cf4FadeOut1;

     -webkit-animation-duration: 30s;
     -moz-animation-duration: 30s;
     -ms-animation-duration: 30s;           
}

#cf4a a:nth-of-type(2) {
     -webkit-animation-name: cf4FadeOut2;
     -moz-animation-name: cf4FadeOut2;
     -ms-animation-name: cf4FadeOut2;

     -webkit-animation-duration: 60s;
     -moz-animation-duration: 60s;
     -ms-animation-duration: 60s;    
}

Answer 2

在您的小提琴和演示页面中，您将图像包裹在<a>标签中。这会导致错误出现在：nth-of-type（）中。

所有图片都受到以下类型的影响：nth-of-type（1）声明，因为它们都是<a>标记内的“第一子”元素。

Answer 3

我做了一些改动，让它的工作比以前好一些。但是，当图像从最后一个变为第一个时，我仍然无法解释为什么动画无法正常工作。

<head>
    <title> CSS alpha animation test </title>
    <meta charset="utf-8" />


</head>

<body>

    <style>

    @-webkit-keyframes cf4FadeInOut {
     0% {
       opacity:0;
     }
     45% {
       opacity:0;
     }    
     55% {
       opacity:1;
     }
     100% {
       opacity:1;
     }
    }       

    #cf4a {
        position:relative;
        height:250px;
        width:300px;
        margin:0 auto;
    }
    #cf4a img {
        position:absolute;
        left:0;
    }

    #cf4a img {
        -webkit-animation-name: cf4FadeInOut;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-duration: 30s;     
    }
    #cf4a img:nth-of-type(1) {
         -webkit-animation-delay: 0s;   
    }
    #cf4a img:nth-of-type(2) {
         -webkit-animation-delay: 10s;
    }
    #cf4a img:nth-of-type(3) {
         -webkit-animation-delay: 20s;       
    }

    </style>

    <div id="cf4a">

        <img src="http://leongaban.com/_stack/css_animation/img/bird1.jpg" />
        <img src="http://leongaban.com/_stack/css_animation/img/tomato2.jpg" />
        <img src="http://leongaban.com/_stack/css_animation/img/boat3.jpg" />

    </div>

</body>

</html>

请注意，我已删除了不同浏览器的所有其他代码，只是留下了webkit代码，因为我在chrome上测试了这个。我也改变了百分比，就像他们的例子一样，这有点不同。

Answer 4

为什么不尝试使用jquery。

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');
//var $sibs  = $active.siblings();
//var rndNum = Math.floor(Math.random() * $sibs.length );
//var $next  = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );
});

CSS淡出动画时机关闭

4 个答案: