CSS3 - Animation-delay not working

Question

I have a simple CSS3 animation here.

#FadeIn3 {
    animation-delay: 20s;
    -webkit-animation-delay: 20s;
    animation: FadeIn 3s;
    -webkit-animation: FadeIn 3s;
}

I guess I don't have to link the animation itself, because it works perfectly.

Also, the HTML is fine, everything works but the animation-delay.

Answer 1

The order is incorrect, you need to place animation-delay after animation which is shorthand property, and hence it resets the delay timer.

The order of animation shorthand is as follows...

^{The order is important within each animation definition: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.}

^{Credits: Mozilla Developer Network}

---

So, you are defining that after the animation-delay property, and thus, animation resets the delay to 0

Demo (Wont work)

Demo 2 (Switched the order of properties defined)

Note: I've minimized the timer to 3s delay so that you can see the effect faster.

---

Advice: Always declare prefixed properties before declaring standard ones, so instead of writing like

animation-delay: 20s;
-webkit-animation-delay: 20s;

Have an habit of writing the properties like

-webkit-animation-delay: 20s;
animation-delay: 20s;