優雅地實現CSS Animation delay

今天寫一個css動畫時遇到一個有意思的問題，記錄以下：

1.需求：

　　等待元素A的動畫加載完，再加載B元素的動畫（下圖中A爲大熊貓，B爲下方卡片）

　　先來看下最後的效果啦：

　　

2.初始思路：

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

　　b的動畫過程代碼以下：

　　@keyframes bmove {

　　　　0% { margin-top: 100%; opacity: 0 }

　　　　100% { margin-top: 0%;opacity: 1 } 

　　}

　　出現bug：

　　

　　能夠明顯看出B元素在A作動畫時就已經出現，這顯然是不符合需求的；而其緣由就是在B元素delay的過程當中一直會處在畫面中，而不是在畫面外等着入場，從這裏咱們也更能理解animation的暗藏含義：即動畫前和動畫後沒有變化。（這就像你把脈動裝進了可樂的瓶子裏，脈動依舊仍是脈動，而不是所以就變可樂了），那怎麼樣才能使B元素在A作動畫時不要顯示出來呢？怎麼樣才能使其乖乖地先呆在畫面以外呢？

　　很天然地，想到了將其opacity設爲0，不過單單這樣，動畫以後它又要消失了，效果見下圖：

　　

　　再一次證實了animation的暗藏含義：即動畫前和動畫後沒有變化

　　這個時候天然地想到在動畫後再利用javascript將其opacity設爲1，那這樣是否是就能高枕無憂了呢？先試試看

3.JS方法：

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

　　實現以後，在電腦上一切ok；然而在手機上運行時，出現了動畫結束以後，B元素又閃了一下再出現的情況（因爲手機不方便錄製gif，因此這裏就沒放圖了，你們自行腦補，哈哈）

　　情況緣由猜測：

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

　　既然這樣，那就完全放棄把JS融入動畫控制中，由於不一樣瀏覽器js引擎差別

　　那怎麼樣能使opacity 一開始爲0 一段時間以後變爲1 呢？

4.優雅的delay方法：

　　成也delay，敗也delay。若是這時候還繞在使用animation-delay屬性上，那始終沒有辦法，因此乾脆跳出delay怪圈，不使用delay！！！

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

　　答案就是在animation的動畫過程代碼中本身加一段delay動畫過程，話很少說，上代碼：

　　@keyframes bmove {

　　　　0% { margin-top: 100%; opacity: 0 }

　　　　50% { margin-top: 100%; opacity: 0 }

　　　　100% { margin-top: 0%;opacity: 1 } 

　　}

　　紅色部分代碼便是手動delay代碼，這時，既可讓B元素在delay期間不執行動畫，又能讓其初始狀態和結束狀態達到需求，這個時候咱們的需求就完美實現啦：