Gracefully use CSS Animation delay

Today, writing a CSS animation encountered a mini puzzle, recorded as follows:

1. Requirements:

Wait for the animation of element A to load and then load the B element animation

2. Initial thinking:

Adds delay to the animation attribute of the B element (delay, which causes the delay time = the load time of the A element animation)
i.e.:animation:bmove 1s . 4s 1; (Here the . 4s is delay)

The animation process code for B is as follows:

　　@keyframes Bmove {

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

70% {opacity:1px; }

100% {margin-top:0px}

}

A bug has occurred:

Because the demand is a B element is also gradual, that is, opacity from 0 to 1

If the opacity of B is set to 0, then B disappears after the end of the animation, and if the opacity of B is set to 1, then B appears before delay; This is obviously not in line with the demand, this time naturally think of a JS method

3.JS Method:

First set the opacity of B to 0, and then to the end of delay, with JS to the B opacity set to 1 (with a timer, that is, settimeout)

After the implementation, everything OK on the computer, however, when it is running on the phone, the B element flashes again after the animation is over.

Status Reason conjecture:

The JS engine of the mobile browser has a delay relative to the CSS, which causes the callback in the SetTimeout method to execute after the animation ends, making the above situation appear

In this case, then completely give up JS into the animation control, because different browser JS engine differences

How does that make opacity into 1 after 01?

4. The Graceful delay method:

Become also delay, defeated also delay. If this is still around using the Animation-delay attribute, there is always no way, so simply jump out of the delay cycle, do not use delay!!!

So how does delay work without using the?

The answer is to add a delay animation process in animation's animation process code, not to say, on the code:

@keyframes Bmove {

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

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

80% {opacity:1px; }

100% {margin-top:0px}

}

　　The red part of the code is the manual delay code, which allows the B element to not be animated during delay, but also to allow its initial state and end state to meet demand

Gracefully use CSS Animation delay