CODEWITHSUNDEEP
cssanimation
rob
rob

Reputation: 734

animation delay not working

Okay, I have this text that I want to appear after 20s. I am using the animation-delay property but it is not working. Perhaps, I am doing something wrong.

Please help me out to get to right track..

Here is my code..

@import url(http://fonts.googleapis.com/css?family=Economica);
#text{
font-family:'Economica', sans-serif;
font-weight:bold;
position:absolute;
left:50%;
top:50%;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 5s;
animation-delay:15s;
-webkit-animation-delay:15s;
-webkit-animation:fade-in 5s;


}

@keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}

@-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}

Here is the link on Fiddle

Thank You for everything!

EDIT ONE:

After changing the order of the animation properties, and adding the opacity:0 in the text, I got the following

#text{
font-family:'Economica', sans-serif;
position:absolute;
left:50%;
top:50%;
opacity:0;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 2s;
animation-delay:3s;
-webkit-animation:fade-in 2s;
-webkit-animation-delay:3s;
-o-animation:fade-in 2s;
-o-animation-delay:3s;

}

@keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}

@-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}

But if I leave the opacity to 0 in the #text, the text will disappear once the animation is over.

How can I keep the text visible after the animation is done??

Thank you!

Upvotes: 25

Views: 42255

Answers (2)

paddy
paddy

Reputation: 63471

You've specified the -webkit versions in the wrong order. The -webkit-animation replaces the delay rule that you just set up. Reverse the order so that the delay comes after.

-webkit-animation:fade-in 5s;
-webkit-animation-delay:15s;

You can avoid these issues if you always set a single attribute:

-webkit-animation-name: fade-in;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 15s;

Don't forget to also set:

opacity: 0;

Otherwise the text will be visible until the animation starts, and:

-webkit-animation-fill-mode: forwards;

So that the animated opacity is retained after fading in.

Upvotes: 32

Adrift
Adrift

Reputation: 59779

You need to place the animation-delay rule after the shorthand, as the shorthand is resetting your value to the default which is 0s - or you could just place it within the shorthand:

#text {
    -moz-animation: fade-in 5s 15s;
    -webkit-animation: fade-in 5s 15s;
    animation: fade-in 5s 15s;
}

http://jsfiddle.net/wXdbL/2/ (changed the delay to 1s so it's obvious)

Upvotes: 12

Related Questions