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;
Comments
Post a Comment