連續的CSS3動畫

我想知道是否有可能淡入僅使用CSS3的項目列表？連續的CSS3動畫

HTML會是這樣的：

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
    <li>item 5</li> 

    <li>item 6</li> 
    <li>item 7</li> 
    <li>item 8</li> 
    <li>item 9</li> 
    <li>item 10</li> 

    <li>item 11</li> 
    <li>item 12</li> 
    <li>item 13</li> 
    <li>item 14</li> 
    <li>item 15</li> 
</ul>

而當UL變一次，這是完成了類「淡出」這將是冷靜，如果第一個「物品1」淡出（在2秒）淡出下一個（「item2」）等等，直到所有項目都淡出爲止。

我知道如何做到這一點使用jQuery，但它會很好，如果這可能只使用CSS3？任何想法，如果這可能是可能的？

編輯：我真的很想找一個解決方案，當你不知道列表中有多少項目時也可以使用。它可能是1它可能是100？

EDIT：顯然，使用CSS的可變數量的元素是不可能的，所以最好的CSS解決方案是固定數量的項目。否則，你將不得不使用JS。

Thx爲答覆！

來源

2011-12-21 Stijn_d

這會工作：

HTML：

<ul class="fadeout"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
</ul>

CSS：

ul.fadeout li:nth-child(1){ 
    -webkit-animation: fadeOut 2s linear forwards; 
} 
ul.fadeout li:nth-child(2){ 
    -webkit-animation: fadeOut 2s linear 2s forwards; 
} 
ul.fadeout li:nth-child(3){ 
    -webkit-animation: fadeOut 2s linear 4s forwards; 
} 
ul.fadeout li:nth-child(1){ 
    -webkit-animation: fadeOut 2s linear forwards; 
} 
@-webkit-keyframes fadeOut { 
    0% { opacity: 1; } 
    100% { opacity: 0; } 
}

http://jsfiddle.net/fGAZr/

來源

2011-12-21 14:00:14 Jonas

這裏把代碼的鏈接會更好。此外，這是使用WebKit，所以不能在FF8 ... – Skuld 2011-12-21 14:16:05

抱歉打擾你！ – Jonas 2011-12-21 16:25:32

不是一個挖，只是一個建議和意見，你可能想要添加它是一個鉻/ Safari的解決方案。 :) – Skuld 2011-12-21 16:29:42

這事我不會推薦，與所有的供應商擴展它會變得非常冗長。用scss自動生成代碼是可能的，但我不打擾。

ul li { transition: opacity 200ms linear;} 
ul.fadeout li {opacity: 0;} 

ul.fadeout li:nth-child(1) { transition-delay: 0 } 
ul.fadeout li:nth-child(2) { transition-delay: 0.1s } 
ul.fadeout li:nth-child(3) { transition-delay: 0.2s } 
ul.fadeout li:nth-child(4) { transition-delay: 0.3s } 
ul.fadeout li:nth-child(5) { transition-delay: 0.4s } 
ul.fadeout li:nth-child(6) { transition-delay: 0.5s } 
ul.fadeout li:nth-child(7) { transition-delay: 0.6s } 
ul.fadeout li:nth-child(8) { transition-delay: 0.7s } 
ul.fadeout li:nth-child(9) { transition-delay: 0.8s } 
ul.fadeout li:nth-child(10) { transition-delay: 0.9s } 
ul.fadeout li:nth-child(11) { transition-delay: 1s } 
ul.fadeout li:nth-child(12) { transition-delay: 1.1s } 
ul.fadeout li:nth-child(13) { transition-delay: 1.2s } 
ul.fadeout li:nth-child(14) { transition-delay: 1.3s } 
ul.fadeout li:nth-child(15) { transition-delay: 1.4s }

您可以查看webkit的唯一的例子在這裏：http://jsfiddle.net/kUQj7/

來源

2011-12-21 14:38:29 Duopixel

是的，這是有效的，但我真的尋找一種解決方案，不涉及有一個固定數量的項目。如果我將2個項目添加到列表中，它們將不會動畫，我指定了一些問題。 – 2011-12-22 16:09:51

僅在CSS中不可能。 – Duopixel 2011-12-22 19:14:54

這很糟糕，雖然會很酷，但它可以完全替代jquery代碼，但是我必須使用javascript。感謝您的答案，雖然 – 2011-12-23 08:16:09

連續的CSS3動畫

回答

相關問題