今天寫一個css動畫時遇到一個mini難題，記錄如下：

1.需求：

　　等待元素A的動畫加載完，再加載B元素的動畫

2.初始思路：

　　在B元素的動畫屬性上加上delay(延遲，使得這個延遲時間 = A元素動畫的加載時間)
　　即：animation : bmove 1s .4s 1; (這裏的.4s即delay)

　　b的動畫過程代碼如下：

　　@keyframes bmove {

　　　　0% { opacity:0px; margin-top:300px }

　　　　70% { opacity:1px; }

　　　　100% { margin-top:0px }

　　}

　　出現bug：

　　因為需求是B元素也是漸入，即opacity 由 0 變到 1

　　如果把B的opacity設為0， 則動畫結束後B又消失了；如果把B的opacity設為1，則delay之前B就出現了；這顯然都是不符合需求的，這時候自然而然就想到一種JS方法

3.JS方法：

　　先把B的opacity設為0，然後待delay結束，用JS把B的opacity設為1 （用定時器實現，即setTimeout）

　　實現之後，在電腦上一切ok；然而在手機上運行時，出現了動畫結束之後，B元素又閃了一下再出現的狀況

　　狀況原因猜想：

　　　　手機瀏覽器的js引擎相對css有延遲，導致動畫結束後，setTimeout方法內的回調才執行，使得出現上述狀況

　　既然這樣，那就徹底放棄把JS融入動畫控制中，因為不同瀏覽器js引擎差異

　　那怎麽樣能使opacity 一開始為0 一段時間之後變為1 呢？

4.優雅的delay方法：

　　成也delay，敗也delay。如果這時候還繞在使用animation-delay屬性上，那始終沒有辦法，所以幹脆跳出delay怪圈，不使用delay！！！

　　那不使用delay如何辦到delay的效果呢？

　　答案就是在animation的動畫過程代碼中自己加一段delay動畫過程，話不多說，上代碼：

　　@keyframes bmove {

　　　　0% 　{ opacity:0px; margin-top:300px }

　　　　30% { opacity:0px; margin-top:300px }

　　　　80% { opacity:1px; }

　　　　100% { margin-top:0px }

　　}

　　紅色部分代碼即是手動delay代碼，這時，既可以讓B元素在delay期間不執行動畫，又能讓其初始狀態和結束狀態達到需求

優雅地使用CSS Animation delay