Question

所以我想要使用css属性制作动画的3个图像，我似乎有两个图像工作正常，但无法看到如何动画第三个图像。

图像应按如下方式设置动画

class =“top”首先持续1.5秒
class =“middle”秒1.5秒
class =“bottom”第三名，持续1.5秒

一次只能看到一张图片。

这是代码;

    <!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" /> 
        <meta http-equiv="X-UA-Compatible" content="chrome=1" /> 
<title>Untitled Document</title>
</head>

<body>

<div id="cf3" class="shadow"> 
    <img class="bottom" src="http://dl.dropbox.com/u/21893804/s1.jpg" />
    <img class="middle" src="http://dl.dropbox.com/u/21893804/s2.jpg" /> 
    <img class="top" src="http://dl.dropbox.com/u/21893804/s3.jpg" /> 
</div>


</body>
</html>
@-webkit-keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
 100% {
   opacity:0;
 }
}

@-moz-keyframes cf3FadeInOut {
 0% {
   opacity:1;
 }
 100% {
   opacity:0;
 }
}    

#cf3 {
    position:relative;
    height:60px;
    width:480px;
    margin:0 auto;
}
#cf3 img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf3 img.top {
    -webkit-animation-name: cf3FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-direction: normal;

    -moz-animation-name: cf3FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 1.5s;
    -moz-animation-direction: normal;

    animation-delay:3s;
    -webkit-animation-delay:3s; /*Safari and Chrome */    
}
#cf3 img.middle {

    -webkit-animation-name: cf3FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-direction: normal;

    -moz-animation-name: cf3FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 1.5s;
    -moz-animation-direction: normal;
    animation-delay:1.5s;
    -webkit-animation-delay:1.5s; /*Safari and Chrome */            
}

Answer 1

我认为你需要让动画渐变从0变为1，以便1/3的时间变为0.你然后使用延迟错开它们，这样只有一个具有1值。

我会尝试在某个时候解决它！

-webkit（CSS3）淡出动画 - 包括jsFiddle

1 个答案: