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 }
}
出現(xiàn)bug：
可以明顯看出B元素在A做動畫時就已經(jīng)出現(xiàn)堤结，這顯然是不符合需求的唆迁；而其原因就是在B元素delay的過程中一直會處在畫面中，而不是在畫面外等著入場竞穷，從這里我們也更能理解animation的暗藏含義：即動畫前和動畫后沒有變化唐责。（這就像你把脈動裝進(jìn)了可樂的瓶子里，脈動依舊還是脈動瘾带，而不是因此就變可樂了）鼠哥，那怎么樣才能使B元素在A做動畫時不要顯示出來呢？怎么樣才能使其乖乖地先呆在畫面之外呢看政？
很自然地朴恳，想到了將其opacity設(shè)為0，不過單單這樣允蚣，動畫之后它又要消失了于颖，效果見下圖：
再一次證明了animation的暗藏含義：即動畫前和動畫后沒有變化
這個時候自然地想到在動畫后再利用javascript將其opacity設(shè)為1，那這樣是不是就能高枕無憂了呢嚷兔？先試試看
3.JS方法：
先把B的opacity設(shè)為0森渐，然后待delay結(jié)束做入，用JS把B的opacity設(shè)為1 （用定時器實(shí)現(xiàn)，即setTimeout）
實(shí)現(xiàn)之后同衣，在電腦上一切ok母蛛；然而在手機(jī)上運(yùn)行時，出現(xiàn)了動畫結(jié)束之后乳怎，B元素又閃了一下再出現(xiàn)的狀況（由于手機(jī)不方便錄制gif彩郊，所以這里就沒放圖了，大家自行腦補(bǔ)蚪缀，哈哈）
狀況原因猜想：
手機(jī)瀏覽器的js引擎相對css有延遲秫逝，導(dǎo)致動畫結(jié)束后，setTimeout方法內(nèi)的回調(diào)才執(zhí)行询枚，使得出現(xiàn)上述狀況
既然這樣违帆，那就徹底放棄把JS融入動畫控制中，因?yàn)椴煌瑸g覽器js引擎差異
那怎么樣能使opacity 一開始為0 一段時間之后變?yōu)? 呢金蜀？
4.優(yōu)雅的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期間不執(zhí)行動畫，又能讓其初始狀態(tài)和結(jié)束狀態(tài)達(dá)到需求因妙，這個時候我們的需求就完美實(shí)現(xiàn)啦：
本文可轉(zhuǎn)載痰憎，但請附上作者昵稱（大雄的學(xué)習(xí)人生）及原文鏈接哦
