CODEWITHSUNDEEP
csscss-animations
Claudio
Claudio

Reputation: 894

CSS3 - Animation-delay not working

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.

Upvotes: 4

Views: 8016

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157284

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...

enter image description here 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;

Upvotes: 13

Related Questions