-webkit（CSS3）的動畫漸變 - 包含的jsfiddle

所以我有3張圖片我想用CSS屬性的動畫，我似乎有兩個圖像工作正常，但無法看到如何在動畫第三圖像-webkit（CSS3）的動畫漸變 - 包含的jsfiddle

。圖像應當作爲動畫第一1.5秒如下

類= 「頂部」
類= 「中間」第二1.5秒
類= 「底部」第三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 */    
}

來源

2011-05-19 Xavier

必須承認，儘管寫了很多上面的代碼，但我還沒有嘗試過這麼做......當我寫這篇文章時，我不知道延遲屬性，但那將是要走的路。 – 2011-05-19 11:34:03

其中大部分是直接從您的網站上解除的！令人驚歎的教程感謝豐富:) – Xavier 2011-05-19 12:30:37

我認爲你需要做的動畫褪色從0到1，這樣對於它在0時然後，您使用的延遲，使得只有一個具有1個值一次他們錯開1/3 。

我會嘗試並在某個時候解決它！

來源

2011-05-19 11:42:58

哦，這似乎是一個更有效的方法，由於緊迫性我最終使用jQuery來動畫，但它將是很好的知道未來。謝謝Rich :) – Xavier 2011-05-19 14:47:43

-webkit（CSS3）的動畫漸變 - 包含的jsfiddle

回答

相關問題