1

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

这是我的预览页面。你应该看到一只鸟，然后是西红柿，然后是一艘船，但现在它只是相互重叠并最终落在船上。

我正在关注 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>

4

4 回答 4

2

我相信您的部分问题是z-index在动画期间排序以及动画时间没有重叠（与此相关z-index）。

使用仅淡出技术（因为您似乎正在对图像进行一次性动画）。我有一个在 Firefox 和 Chrome 中测试过的工作演示的解决方案（IE9 不支持动画，所以你必须在最初使用扩展时为 IE10 做准备-ms-）。由于我只淡出一次，因此最终标签上不需要动画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;    
}
于 2012-04-16T15:38:51.573 回答
1

在您的小提琴和演示页面中，您将图像包裹在<a>标签中。这会导致错误出现在您使用 :nth-of-type() 的过程中。

您的所有图像都受到 :nth-of-type(1) 声明的影响，因为它们都是<a>标签中的“第一个孩子”元素。

于 2012-04-11T06:57:00.680 回答
0

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

<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 上测试它。我还按照他们的示例更改了完成百分比，这产生了一些不同。

于 2012-04-11T06:41:30.170 回答
0

你为什么不尝试使用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 );
});
于 2012-04-16T09:24:47.477 回答