优雅地实现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期间不执行动画，又能让其初始状态和结束状态达到需求，这个时候我们的需求就完美实现啦：

　　
　　本文可转载，但请附上作者昵称（大雄的学习人生）及原文链接哦