CSS淡入淡出动画计时关闭

Question

所以我正在尝试淡化 3 张图像，其中一张慢慢叠放在一起，这样您就可以在几秒钟内看到每张图像，然后再下一张淡出顶部。我正在关注this tutorial here. 但是由于某种原因，我的图像似乎彼此褪色太快，我无法很好地控制时间。

Here is my preview page. 假设您会看到一只鸟，然后是西红柿，然后是一艘船，但现在它们只是相互重叠并最终落在船上。

我正在关注 Demo 1 和 Demo 3，你知道为什么我的动画关闭了吗？提前致谢！ :)

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

代码：

<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 );
});