CSS3增加延遲效果？

我有一個無序列表：在動畫CSS3增加延遲效果？

<ul> 
    <li>Apple</li> 
    <li>Monkey</li> 
    <li>Sun</li> 
    <li>Moon</li> 
    <li>Movies</li> 
</ul>

和比例：

ul li { 
    animation   : scale-in 1s; 
} 

@keyframes scale-in 
{ 
    0% { 
     opacity    : 0; 
     -webkit-transform : scale(0.5); 
    } 
    20% { 
     opacity    : 0; 
     -webkit-transform : scale(0.5); 
    } 
    100% { 
     opacity    : 1; 
     -webkit-transform : scale(1.0); 
    } 
}

現在我喜歡的每個元件的延遲，以距相互1秒。所以第一個項目立即出現，第二個1秒延遲，第三個2秒延遲等。

有沒有一個簡單的方法來做到這一點，也許使用第n個選擇器？或者我真的不得不把它寫出來像ul li:nth-child(1) { delay : 1s; } ul li:nth-child(2) { delay : 2s; }

來源

2012-03-25 Mark

對於這種情況，使用Javascript會好得多，但CSS3並不是表達這種情況的最簡單方法，如果它甚至適用於所有主流瀏覽器的所有最新版本，就更加幸運了，更不用說舊的了。 – orlp 2012-03-25 09:34:14

這只是一個很好的效果，我不介意舊的瀏覽器不會看到效果（這些人應該只是更新他們的瀏覽器！）。 – Mark 2012-03-25 09:35:25

除了你建議的方式，沒有辦法用CSS3做到這一點。由於沒有真正的數學計算方法，或者通過事物循環，除了手工寫出外，這是不可能的。我會不得不第二個NightCracker的JS建議。你不必一定要用JS寫動畫本身，但是你可以用JS來開啓它。像使用帶增量計數器的While循環一樣簡單的事情應該可以做到。

最後，你只是保存了幾行代碼，而不是寫在CSS中。功能方面，它仍然是相同的，特別是如果不考慮跨瀏覽器兼容性。

來源

2012-03-25 17:14:24

我認爲你可能是對的，雖然如果你可以將簡單的數學公式添加到css，比如動畫延遲，那將會很好：（n + 1）s其中n是元素的索引（如在第n個孩子中所見）。 – Mark 2012-03-25 19:01:38

CSS3增加延遲效果？

回答

相關問題