优雅地使用CSS Animation delay

今天写一个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期间不执行动画，又能让其初始状态和结束状态达到需求

原文地址：https://www.cnblogs.com/codernie/p/8988215.html