css - CSS3 - Animation-delay not working -

i have simple css3 animation here.

#fadein3 {     animation-delay: 20s;     -webkit-animation-delay: 20s;     animation: fadein 3s;     -webkit-animation: fadein 3s; } 

i guess don't have link animation itself, because works perfectly.

also, html fine, works animation-delay.

the order incorrect, need place animation-delay after animation shorthand property, , hence resets delay timer.

the order of animation shorthand follows...

^{the order important within each animation definition: first value can parsed <time> assigned animation-duration, , second 1 assigned animation-delay.}

^{credits: mozilla developer network}

---

so, defining after animation-delay property, , thus, animation resets delay 0

demo (wont work)

demo 2 (switched order of properties defined)

note: i've minimized timer 3s delay can see effect faster.

---

advice: declare prefixed properties before declaring standard ones, instead of writing like

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

have habit of writing properties like

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